jquery-simple-datetimepicker自定义“未来” [英] jquery-simple-datetimepicker Custom "Future Only"

问题描述

所以我使用jquery-simple-datetimepicker插件在点击文本框时创建一个日期时间压缩弹出窗口。这个日期时间选择器有一个名为futureOnly的功能，不允许用户选择过去的日期。

So I'm using the jquery-simple-datetimepicker plugin to make a datetime calender popup when clicking on a textbox. With this date-time picker comes a feature called "futureOnly" which does not allow the user to select a date in the past.

这是代码如何看待时刻：

This is how the code looks at the moment:

<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>

这个工作很好，但是我需要自定义它，以便我可以给它一个值来添加到目前的时间，并从该日期开始未来功能。

This works very well, but I need to customise it so that I can give it a value to add to the current time, and start the "future only" feature from that given date.

进一步澄清：

说当前的日期时间是 3/10/2013 11:35 ，我想要从未来功能从当前时间开始30分钟...所以用户将能够从 3/10/2013 12:05 开始选择一个时间。

Say the current datetime is 3/10/2013 11:35 and I want the "future only" feature to start from 30 mins from the current time... So the user would be able to choose a time from 3/10/2013 12:05 onwards.

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

I hope that this is clear enough :) Any help is appreciated!

推荐答案

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

You'll need to change the plugin to achieve that. The solution here is probably not the most efficient way, but it gives you an idea on where to start playing with the code.

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

On the jquery.simple-dtpicker.js file, look for the blocks below and apply the changes.

更新：根据OP请求，添加了一个新选项，使解决方案更加灵活。等待的分钟数已经过去了。
此外，逻辑已经略有改变。

UPDATE: As per the OP request, a new option has been added to make the solution more flexible. The number of minutes to wait is now passed through. Also the logic has been changed slightly.

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自定义“未来”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！