datepicker, minDate, maxDate + dateformat issue

Question

I have an issue with the dateformat in a form using datepicker.

In my form, I have 2 date fields -> Start Date and End Date.

I want Start Date < End Date. So I use the minDate and maxDate parameters.

I also want the date to appear "dd-mm-yy". But then, it messes with the minDate and maxDate.

For example, if I set StartDate = 3rd of January 2017 (03-01-2017) I cannot set the EndDate before the 2nd of March (02-03-2017) because I guess, it is reading the date in the wrong order. (03-01-2017 = 1st of March 2017).

How can I fix this?

Here's my code :

$(document).ready(function() {
  $("#startdate").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#enddate").datepicker("option", "minDate", dt);
    }
   });
   $("#enddate").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#startdate").datepicker("option", "maxDate", dt);
    }
  });
});

https://jsfiddle.net/Lmxuyjs8/1/

Thanks a lot

Answer 1

I guess you have to use
dateFormat: 'dd-MM-yy'

Answer 2

Another Solution

$(document).ready(function() {
$.datepicker.setDefaults({
      dateFormat: 'dd-mm-yy',
   });
    $('#startdate').datepicker({
          onSelect: function(selectedDate) {
                $('#enddate').datepicker('option', 'minDate', selectedDate );
          }
    });
    $('#enddate').datepicker({
          onSelect: function(selectedDate) {
                $('#startdate').datepicker('option', 'maxDate', selectedDate );
          }
    });

});

Fork fiddle link