jquery-simple-datetimepicker Custom "Future Only"

Question

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.

To Clarify further:

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!

Answer 1

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.

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

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
   }

To use the new option:

$(function () {
    $('#myInput').appendDtpicker({
        "minuteToFuture": 30
    });
});