datepicker bootstrap initialization again

Question

I try to setup 2 datepickers for a simple checkin/checkout system by using the datepicker boostrap :http://www.eyecon.ro/bootstrap-datepicker/

Here my code:

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    var checkin = $('#searchtype_checkin').datepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 2);
            checkout.setValue(newDate);
        }
        checkin.hide();

        $('#searchtype_checkout')[0].focus();
    }).data('datepicker');

    var checkout = $('#searchtype_checkout').datepicker({
        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');

I got most of this code from the documentation. I've just made a little change. Here the logic I want to apply:

After select one date on the checkin, I want to disable all dates before this date in the checkout datepicker in order to avoid a checkout BEFORE the checkin as well as focus on the checkout directly on the event 'changeDate' of the checkin.

Everything works well BUT if after I changed my checkin date for a date BEFORE the date selected the first time, the checkout function "onRender" is not called again and all dates previously disabled ont the checkout datepicker are still disabled.

How can I call the onRender event again on the checkout datepicker ? I would like to call this function after each "changeDate" of the checkin.

Guruprasad J Rao Guruprasad J Rao · Accepted Answer · 2015-04-06T06:00:55

You can use option onSelect of datepicker instead of whatever you are using now.

 var checkin = $('#searchtype_checkin').datepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        },
        format: 'dd/mm/yyyy',
        onSelect: function(selected) {
                var date=new Date(selected)
                day=date.getDate()+2;
                newDate=date.getMonth()+1 + "/" + day + "/" + date.getFullYear();
                $("#searchtype_checkout").datepicker("option","minDate", newDate);
        }
});

EDIT - You can add onSelect to your checkout date too so that when a user selects the check out date first then all the later dates are disabled in the checkin date.

var checkout = $('#searchtype_checkout').datepicker({
        onRender: function (date) {
                     return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                  },
        format: 'dd/mm/yyyy'
        onSelect: function(selected,inst) {
       $("#searchtype_checkin").datepicker("option","maxDate", selected)
     }
});

Working fiddle

datepicker bootstrap initialization again

1 Answers