jquery datetimepicker plugin - how to initialise calendar/time select with the date/time from the field?

Question

I'm using this datetimepicker plugin for jquery: https://github.com/xdan/datetimepicker

It all works fine, except that I want to change the date format from "YYYY/MM/DD" to "DD/MM/YYYY". I've done this by passing

format:'d/m/Y H:mm',

in the options to initialise the datetime picker for the field.

That works, in that when I choose a date and time, it writes into the text field in that format, eg 2020/05/21 17:00 .

The problem occurs when the page loads and there is a date/time set in the field already: this is in the same format as above, eg 2020/05/21 17:00 - the same format the plugin writes into the field.

When I click on the field and the calendar/timeselect appears, it's set to NOW rather than what was in the field. It's like now that I changed the format, it can't read the date/time out of the field properly, and so doesn't initialize itself properly. This all works fine when I stick with the default format ('Y/m/d H:mm')

The documentation is here: https://xdsoft.net/jqplugins/datetimepicker/

Does anyone know how to resolve this problem?

EDIT - here is a jsfiddle which demonstrates the problem:
https://jsfiddle.net/Lphdnt20/

EDIT 2 - trying @Kalimah's approach, below, it sort of works but it a bit broken - the datepicker (on the second input) looks like it has initialised at the right year and month, but the day isn't highlighted on the calendar and the minutes are all represented as "i": see screengrab, which was taken on this page, after pressing the "Run code snippet" button.

Answer 1

Apparently this is a bug ( see here ).

You have two ways to work around it. First one disable validate upon blur event by adding validateOnBlur: false to your options.

Or, you can validate using an external library like moment.js. The downside to this approach is that it applies globally to all date pickers. I could not find a way to make it specific to a single picker.

See more here about moment.js formatting options.

And this is a demo:

 /* Add this to enable moment.js formatting (or add your own formatter)*/ jQuery.datetimepicker.setDateFormatter({ parseDate: function(date, format) { var d = moment(date, format); return d.isValid()? d.toDate(): false; }, formatDate: function(date, format) { return moment(date).format(format); } }); $("#picker2").datetimepicker({ step: 30, format: 'DD/MM/YYYY' // Change to moment.js formatting options });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <input id="picker2" name="bar" size="30" style="width: 150px" type="text" value="25/02/2016 18:30">

If you decided to use the second option you need to apply format to each time you initialize the datepicker. See this example:

 jQuery.datetimepicker.setDateFormatter({ parseDate: function(date, format) { var d = moment(date, format); return d.isValid()? d.toDate(): false; }, formatDate: function(date, format) { return moment(date).format(format); } }); $("#picker1").datetimepicker({ step: 30, format: 'YYYY/MM/DD H:mm', formatTime:'H:mm', formatDate:'YYYY/MM/DD' }); //try to use different date format $("#picker2").datetimepicker({ step: 30, format: 'DD/MM/YYYY H:mm', formatTime: "H:mm", formatDate: "DD/MM/YYYY" });

 body { background: #ffffff; padding: 20px; font-family: Helvetica; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <p> A text field with a date in datetimepicker's default format of "yyyy/mm/dd hh:mm". Initialises correctly with the date/time from the input. </p> <input id="picker1" name="foo" size="30" style="width: 150px" type="text" value="2016/02/25 18:30"> <p> A text field with a date in "dd/mm/yyyy hh:mm" format (called 'd/m/YH:m' in the datetimepicker options). The plugin will *write* the selected date and time into the field correctly, but it doesn't initialise itself properly from the time in the field: when it appears, the date and time picker are set to the **current** date/time, not the date/time from the input. Note that if you choose a time/date, it will write it into the input with the desired format, which suggests that the problem is not the 'format' option itself. </p> <input id="picker2" name="bar" size="30" style="width: 150px" type="text" value="25/02/2016 18:30">