3

所以我使用 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>

这很好用，但我需要对其进行自定义，以便我可以给它一个添加到当前时间的值，并从给定日期开始“仅限未来”功能。

进一步澄清：

假设当前日期时间是2013 年 3 月 10 日11:35，我希望“仅限未来”功能从当前时间 30 分钟开始......所以用户可以选择 2013 年 3 月 10 日的时间12:05开始。

我希望这足够清楚:) 任何帮助表示赞赏！

4

1 回答 1

4

您需要更改插件来实现这一点。这里的解决方案可能不是最有效的方法，但它让您了解从哪里开始使用代码。

在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
    });
});
于 2013-10-03T11:07:48.807 回答