javascriptjquerydatepickermindate

jQuery datepicker dynamic minDate distroys value

I create 2 date pickers:

<input id="from" readonly value="05-10-2014">
<input id="to" readonly value="09-10-2014">

$("#from").datepicker();
$("#to").datepicker();
console.log($("#from").val() + ' - ' + $("#to").val());

Both dates are displayed correctly.

Now I set the minDate dynamically:

$("#to").datepicker("option", "minDate", $("#from").val());
console.log($("#from").val() + ' - ' + $("#to").val());

2nd date disappears.

I am sure I miss something obvious. Please help.

Solution

  • It is because of the dateFormat, the default date format is mm/dd/yy, but when you pass the value of from as a string it is not in that format which is causing the problem.

    One possible solution is to set the dateFormat to the datepicker like

    $("#from, #to").datepicker({
  dateFormat: 'dd-mm-yy'
});
console.log($("#from").val() + ' - ' + $("#to").val());

$("#to").datepicker("option", "minDate", $("#from").val());
console.log($("#from").val() + ' - ' + $("#to").val());
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="from" value="05-10-2014">
<input id="to" value="09-10-2014">