CODEWITHSUNDEEP
jqueryjquery-uidatedatepicker
user2244961
user2244961

Reputation: 151

How do I set Min Date in Datepicker from another Datepicker?

I am currently adding validation to my date pickers and am having trouble setting the min date in the to date picker to be whatever was chosen in the from date picker. I.e if 12-3-15 is selected then the minimum date in the to date picker is 12-3-15. Here is the code I am using:

$("#from").datepicker({
            defaultDate: new Date(),
            minDate: new Date(),
            onSelect: function(dateStr) 
            {
            fromDate = new Date(dateStr);
            }
        });

$('#to').datepicker({
            defaultDate: new Date(),
            minDate: ("#from" + "1D"), (<- HERE)
            onSelect: function(dateStr) {
            toDate = new Date(dateStr);

                // Converts date objects to appropriate strings
                fromDate = ConvertDateToShortDateString(fromDate);
                toDate = ConvertDateToShortDateString(toDate);
        });

Does anybody know how I could achieve this?

Upvotes: 6

Views: 22420

Answers (2)

Alan Cordova
Alan Cordova

Reputation: 171

The answer is good but you need to destroy the datepicker of the $to because if not the $to datepicker have still the first date what you select, and remove the option in $to datepicker, this work for me, you not need to make other function for $to.

$("#from").datepicker({
    defaultDate: new Date(),
    minDate: new Date(),
    onSelect: function(dateStr) 
    {         
        $("#to").datepicker("destroy");
        $("#to").val(dateStr);
        $("#to").datepicker({ minDate: new Date(dateStr)})
    }
});

Upvotes: 2

Madhu
Madhu

Reputation: 2551

Please check this working fiddle

JSFiddle

Use option to set the minDate to the second datepicker

$("#from").datepicker({
        defaultDate: new Date(),
        minDate: new Date(),
        onSelect: function(dateStr) 
        {         
            $("#to").val(dateStr);
            $("#to").datepicker("option",{ minDate: new Date(dateStr)})
        }
    });

Upvotes: 5

Related Questions