jquery-simple-datetimepicker自定義「僅限未來」

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> 

這工作得很好，但我需要自定義它，這樣我可以給它一個值添加到當前的時間，並啓動從該給定日期開始的「僅限未來」功能。

進一步明確：

說當前日期時間爲2013年3月10日11:35，我想「未來只有」功能，從30分鐘開始從當前時間... ...因此，用戶將能夠從2013年3月10日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 
    }); 
});