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>

这非常有效，但我需要对其进行自定义，以便我可以为其添加一个值以添加到当前时间，并从该给定日期开始“仅限未来”功能。

进一步明确：

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

我希望这很清楚:)感谢任何帮助！

Answer 1

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

在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
    });
});

jquery-simple-datetimepicker自定义“仅限未来”

1 个答案: