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

Question

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. Ie 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?

Answer 1

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

Answer 2

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