因此，我使用jquery-simple-datetimepicker插件在单击文本框时弹出日期时间日历。该日期时间选择器附带了一个名为“ futureOnly”的功能，该功能不允许用户选择过去的日期。
现在的代码是这样的：
<div id="dateTime">
<p class="smallItalicText">When?</p>
<input type="text" name="date9" id="datetime">
</div>
<script type="text/javascript">
$(function(){
$('*[name=date9]').appendDtpicker({
"closeOnSelected": true,
"futureOnly" : true,
"calendarMouseScroll": false,
"minuteInterval": 15,
});
});
</script>
这项工作效果很好，但是我需要对其进行自定义，以便为它提供一个添加到当前时间的值，并从该给定日期启动“仅未来”功能。
为了进一步阐明：
假设当前日期时间是3/10/2013 11:35，并且我希望“仅未来”功能从当前时间开始30分钟...因此用户可以选择2013年3月10日的时间12:05开始。
我希望这足够清楚：)任何帮助，我们都感激不尽！
您需要更改插件才能实现。这里的解决方案可能不是最有效的方法，但是它为您提供了从哪里开始使用代码的想法。
在jquery.simple-dtpicker.js文件上，查找下面的块并应用更改。
更新：根据OP请求，已添加新选项以使解决方案更加灵活。现在等待的分钟数已过去。逻辑也略有改变。
var isFutureOnly = $picker.data("futureOnly");
// Adding option to control the number of minutes to consider when calculating
// the future date/time
var minuteToFuture = $picker.data("minuteToFuture");
var isOutputToInputObject = option.isOutputToInputObject;
...
// Before the change
//var isPastTime = (hour < todayDate.getHours() && || (hour == todayDate.getHours() && min < todayDate.getMinutes());
// After the change (consider the 'minuteToFuture' minutes gap)
var dateTimeLimit = new Date();
dateTimeLimit.setMinutes(dateTimeLimit.getMinutes() + minuteToFuture);
var dateTimeToCheck = new Date();
dateTimeToCheck.setHours(hour);
dateTimeToCheck.setMinutes(min);
var isPastTime = dateTimeToCheck <= dateTimeLimit;
...
$picker.data("futureOnly", opt.futureOnly);
// Adding option to control the number of minutes to consider when calculating
// the future date/time
$picker.data("minuteToFuture", opt.minuteToFuture);
$picker.data("state", 0);
...
/**
* Initialize dtpicker
*/
$.fn.dtpicker = function(config) {
var date = new Date();
var defaults = {
"inputObjectId": undefined,
"current": null,
"dateFormat": "default",
"locale": "en",
"animation": true,
"minuteInterval": 30,
"firstDayOfWeek": 0,
"closeOnSelected": false,
"timelistScroll": true,
"calendarMouseScroll": true,
"todayButton": true,
"dateOnly": false,
"futureOnly": false,
// Adding option to control the number of minutes to consider when calculating
// the future date/time
"minuteToFuture": 30
}
...
/**
* Initialize dtpicker, append to Text input field
* */
$.fn.appendDtpicker = function(config) {
var date = new Date();
var defaults = {
"inline": false,
"current": null,
"dateFormat": "default",
"locale": "en",
"animation": true,
"minuteInterval": 30,
"firstDayOfWeek": 0,
"closeOnSelected": false,
"timelistScroll": true,
"calendarMouseScroll": true,
"todayButton": true,
"dateOnly" : false,
"futureOnly": false,
// Adding option to control the number of minutes to consider when calculating
// the future date/time
"minuteToFuture": 30
}
要使用新选项：
$(function () {
$('#myInput').appendDtpicker({
"minuteToFuture": 30
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句