Using the Jquery datepicker plugin available here:

There is documentation showing how we can have a dynamically restricted date range with two datepickers if they are shown when text inputs are clicked on. We've had this working previously - however, the client has now asked for the calendars to be displayed inline, which means that using the following code from their docs no longer works:

onShow:function( ct ){
this.setOptions({
   minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
  })
 },

I'm guessing we can somehow use 'onGenerate' or 'onSelectDate' to acplish something similar, but can't work out how to do it.

The mission is to:

• ensure that the minimum date and time for the collection date picker can not be BEFORE the date and time picked for delivery AND
• once a collection date and time has been picked, ensure that the delivery date/time can not be reset to something AFTER the date and time picked for collection

Here's a JSfiddle - have a play :)

Using the Jquery datepicker plugin available here:

There is documentation showing how we can have a dynamically restricted date range with two datepickers if they are shown when text inputs are clicked on. We've had this working previously - however, the client has now asked for the calendars to be displayed inline, which means that using the following code from their docs no longer works:

onShow:function( ct ){
this.setOptions({
   minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
  })
 },

I'm guessing we can somehow use 'onGenerate' or 'onSelectDate' to acplish something similar, but can't work out how to do it.

The mission is to:

• ensure that the minimum date and time for the collection date picker can not be BEFORE the date and time picked for delivery AND
• once a collection date and time has been picked, ensure that the delivery date/time can not be reset to something AFTER the date and time picked for collection

Here's a JSfiddle - have a play :)

• javascript
• jquery
• datepicker

1 Answer 1

I managed to met the two requirements you need, using the 'onChangeDateTime'. below is the plete code:

$(function () {
    /**
     * we declare a variable here so that we can use it within both our datepicker onChangeDateTime functions
     * this var will hold the time of delivery + 1hour and will be used in the collection picker when both delivery and collection dates are the same
     */
    var setMinTime = "";

    //Delivery - DatePicker1
    $('#products_delivery').datetimepicker({
        inline: true,
        formatDate: 'Y/m/d',
        dayOfWeekStart: 1,
        lang: 'en',
        allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        defaultSelect: false,
        onChangeDateTime: function (deliveryDateSelected) {

            //when we change Date in delivery picker, we set the collection picker to have this date as minimum
            $("#products_collection").datetimepicker({
                minDate: deliveryDateSelected
            });

            // get the time from delivery picker and add 1 hour, so we can set minTime in collection picker if needed
            var curTimePlusOneHour = deliveryDateSelected.getHours() + 1;
            setMinTime = curTimePlusOneHour.toString() + ":00";
        }
    }); //End of delivery datepicker

    //Collection - DatePicker2
    $('#products_collection').datetimepicker({
        inline: true,
        formatDate: 'Y/m/d',
        dayOfWeekStart: 1,
        lang: 'en',
        allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        defaultSelect: false,
        onChangeDateTime: function (collectionDateSelected) {

            //set the maxDate of delivery picker according to our collection picked day
            $("#products_delivery").datetimepicker({
                maxDate: collectionDateSelected
            });

            //get the value of the dates without time

            //first we gate the value of the selected date
            var deliveryDate = $('#products_delivery').val();
            //deliveryDate is in format "2015/08/06 14:08",and is a string so we use split to take only the date without the time
            var deliveryDateArr = deliveryDate.split(' ');

            // same as above
            var collectionDate = $('#products_collection').val();
            var collectionDateArr = collectionDate.split(' ');

            //if same date also set minTime
            if (deliveryDateArr[0] === collectionDateArr[0]) {
                $("#products_collection").datetimepicker({
                    minTime: setMinTime
                });
            } else {
                $("#products_collection").datetimepicker({
                    minTime: "09:00"
                });
            } //End of if..else..
        }
    }); //End of collection datepicker

});

Here's the JSFiddle, have a look :) - hope that helped :)