jquery datetime picker set minDate dynamic

Question

I guys i\'m using a datetimepicker by trentrichardson.com.

I have a form with two input fields : from and to and i want to be able

Answer 1

In jQuery UI datepicker there is many Functions which are helpful to set minDate or maxDate dynamically like onSelect, onClose.

demo of onClose is already provided in @Tanvir's answer see here: datepicker onClose example

So i will give you example of onSelect.

before it i will tell you difference between onSelect and onclose, as Name suggests onSelect fire just after user selects a date and onClose fire when datepicker closes after date selection, that's all.

here we have two datepicker pickupdate1 and pickupdate2, and we want to set selected date of pickupdate1 to be minDate of pickupdate2 and it should be dynamic, so here's the code:

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});

Answer 2

There is an example on trentrichardson.com. They are using "onSelect". For me it's not working perfert. When setting minDate or MaxDate the time component is set to 0 and only the date remains. And I had to solve some localization problems.

Answer 3

None of the above answers helped me at all. It either didn't work or gave some kind of error.

So I merged them all together and made my own one. I used moment.js as mentioned above, just download it and include it in your page.

$("#start_date").datetimepicker({
    format: 'Y-m-d H:00:00',
    onChangeDateTime: function(dp, $input){
        var dt2 = $('#end_date');
        var minDate = $('#start_date').val();
        var currentDate = new Date();
        var targetDate = moment(minDate).toDate();
        var dateDifference = currentDate - targetDate;
        var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
        var endDate = moment(dt2.val()).toDate();
        if((currentDate - endDate) >= (currentDate - targetDate))
            dt2.datetimepicker({
                'value': minDate
            });
        dt2.datetimepicker({
            'minDate': '-'+minLimitDate
        });
    }
});
$("#end_date").datetimepicker({
    format: 'Y-m-d H:00:00'
});

I am sure there is a better way to do this but I couldn't find it. So I hope this helps someone in the future.