jquerydatetimerangepickermindate

DateTime picker minDate and range between them


I'm using DateTime picker and I can't manage how to make a minDate the day after tommorow. The second problem is how to set 3 days minimum range between them.

For example: today is 2014/10/29 and the minimum day to select should be 2014/11/01. If I select 2014/11/01 in first DateTime picker, there should be a range which wouldn't allow to select less than 2014/11/04 in DateTime picker two.

Thank you for your help...

http://jsfiddle.net/ajmtj1xj/2/

    var d1 = null;
var d2 = null;

jQuery('#datetimepicker3').datetimepicker({
  format:'Y/m/d H:i',
  dayOfWeekStart:'1',
  value:'12:00',
  inline:true,
  lang:'ru',
    onChangeDateTime:function(dp,$input){
    d1 = new Date($input.val());
        calcDiff();
  }

});

jQuery('#datetimepicker2').datetimepicker({
  format:'Y/m/d H:i',
  dayOfWeekStart:'1',
  value:'12:00',
  inline:true,
  lang:'ru',
    onChangeDateTime:function(dp,$input){
        d2 = new Date($input.val());
 calcDiff();
  }

});

function calcDiff(){
    if(d1 != null && d2 != null){ // We have both dates
        var dh = (d2 - d1) / 1000 / 60 / 60;
        $("#difference").val(dh);
    }
}

Solution

  • You can achieve this with the following code. The trick is to destroy the second datetimepicker and rerendering it with a new minDate value.

    $(document).ready(function () {
        var today = new Date();
        // Add one extra day when today from Sunday to Thursday and two extra days when today is Friday or Saturday.
        var plusStartDays = 3 + (today.getDay() <= 4 ? 1 : 2);
    
        var minStart = new Date(today);
        minStart.setDate(today.getDate() + plusStartDays);
    
        var minEnd = new Date(minStart);
        minEnd.setDate(minEnd.getDate() + 3);
    
        $("#start").datetimepicker({
            format: "Y/m/d H:i",
            dayOfWeekStart: "1",
            value: "12:00",
            inline: true,
            lang: "nl",
            onSelectDate: function (ct) {
                var diff = CalcDiff();
    
                var minDate = new Date(ct);
                minDate.setDate(minDate.getDate() + 3);
    
                if (diff > 72)
                    var defDate = new Date($("#end").val());
    
                $("#end").datetimepicker("destroy");
                $("#end").datetimepicker({
                    format: "Y/m/d H:i",
                    dayOfWeekStart: "1",
                    value: "12:00",
                    inline: true,
                    lang: "nl",
                    minDate: minDate,
                    defaultDate: defDate || minDate,
                    onSelectDate: function (ct) {
                        CalcDiff();
                    },
                    onSelectTime: function (ct) {
                        CalcDiff();
                    }
                }).val(defDate || minDate);
    
                CalcDiff();
            },
            onSelectTime: function (ct) {
                CalcDiff();
            },
            minDate: minStart,
            defaultDate: minStart
        }).val(minStart);
    
        $("#end").datetimepicker({
            format: "Y/m/d H:i",
            dayOfWeekStart: "1",
            value: "12:00",
            inline: true,
            lang: "nl",
            minDate: minEnd,
            defaultDate: minEnd,
            onSelectDate: function (ct) {
                CalcDiff();
            },
            onSelectTime: function (ct) {
                CalcDiff();
            }
        }).val(minEnd);
    
        CalcDiff();
    });
    
    function CalcDiff() {
        var start = new Date($("#start").val());
        var end = new Date($("#end").val());
    
        if (start != null && end != null) { // We have both dates
            var hours = Math.round((end - start) / 36e5);
            $("#difference").val(hours);
        }
    
        return hours;
    }
    

    See this FIDDLE for a working example.

    Edit: updated the Fiddle with a fix for skipping a month on the last day of the month and a fix for selecting a start date more than 3 days later than the current selected end date.

    Edit 2: added one extra day to start date when today is from Sunday to Thursday and two extra days when today is Friday or Saturday.