jquery-simple-datetimepicker 自定义 "Future Only"

Question

因此，我使用 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>

这工作得很好，但我需要对其进行自定义，以便我可以为其添加一个值以添加到当前时间，并从该给定日期开始“仅限 future ”功能。

进一步澄清:

假设当前日期时间是3/10/2013 11:35，我希望“仅限 future ”功能从当前时间的 30 分钟开始......这样用户就能够选择3/10/2013 12:05之后的时间。

我希望这足够清楚:)感谢任何帮助!

Answer 1

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

在 jquery.simple-dtpicker.js 文件中，查找下面的 block 并应用更改。

更新:根据 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
    });
});