jquery datetime picker set minDate dynamic

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 to set dynamically a minDate to my "to" field equal to the value of my "from" field.

I know i should use a beforShow op开发者_JAVA百科tion but don't know how to implement the function.

$('.from,.to').datetimepicker({

    beforeShow: customRange

});

EDITED/SOLUTION

function customRange(input) {   
if (input.id == 'to') {     
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x ); 
} 
else if (input.id == 'from') {     
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x ); 
} } 

---

you can set and get minDate dynamically with setter and getter:

//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

explained here

---

If you have two textboxes with corresponding IDs from and to and you want the minDate of to to be the selected date of from then do the following:

$("#from").datepicker({
    minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
        // Set the minDate of 'to' as the selectedDate of 'from'
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

$("#to").datepicker();

---

You can restrict the datepicker range.

But you want to set this range on creation of the datepicker on the "from". I made you a demo which seems to work OK as far as I understand the question.

---

luca: A small addition to your answer...

Using the function you suggested the time component is ignored the first time the datetimepicker is displayed. If you close the datetimepicker and reopen it again, the time component mysteriously reappears. I'm not quite sure what is causing this, but it can be fixed with a bit of a hack:

function setMinMaxDate ( element )
{
    // Store current date - setting max/min date seems to destroy time component
    var val = $(element).val();

    if (element.id == 'endDate') 
    {     
        var x=$('#startDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "minDate",x ); 
    } 
    else if (element.id == 'startDate') 
    {     
        var x=$('#endDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "maxDate",x ); 
    }

    // Restore date
    $(element).val(val);
}

---

Please use latest version of bootstrap.min.js

$("#from").datepicker( {
        format: "dd-mm-yyyy",
        endDate: '+0d',
        autoclose: true,
    }).on('changeDate', function(e) {
    
        var oldDate = $('.datepicker-current').val();
    
        $('#to').data('datepicker').setEndDate(oldDate);
    
    });

---

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.

---

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",
});

---

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.

---

This worked for me

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>