jquery datetimepicker displaying i on the minutes

Question

I wanted to add a datetime picker to my page. However, as can see below, it shows i instead of the minutes. Can you please help?

 $(function() { $('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY HH:MM', lang: 'en', startDate: moment().toDate(), minDate: moment().toDate(), maxDate: moment().add(20, "days").toDate(), }); $.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); }, }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://momentjs.com/downloads/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <input type="text" id="datetimepicker" /> 

Answer 1

You can add a formatTime property:

 $(function() { $('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY', // added formatTime formatTime: 'HH:mm', lang: 'en', startDate: moment().toDate(), minDate: moment().toDate(), maxDate: moment().add(20, "days").toDate(), }); $.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); }, }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://momentjs.com/downloads/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <input type="text" id="datetimepicker" /> 

Answer 2

The default value of format/formatTime/formatDate is:

format: 'Y/m/d H:i',
formatTime: 'H:i',
formatDate: 'Y/m/d',

according to:

date formatter utility library that allows formatting date/time variables or Date objects using PHP DateTime format.

Hence, you need to change the previous values to:

format:'d/m/Y H:i',
formatDate: 'd/m/Y',

Moreover, if you want to change the selected value I would suggest to use the following callback instead of $.datetimepicker.setDateFormatter :

// when a date is changed
onChangeDateTime: function(date, input, event) {

 $('#datetimepicker').datetimepicker({ format:'d/m/YH:i', formatDate: 'd/m/Y', lang:'en', startDate: moment().toDate(), minDate: moment().toDate(), maxDate: moment().add(20, "days").toDate(), onChangeDateTime: function(date, input, event) { input.val(moment(date).format("DD/MM/YYYY")); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/> <script src="https://momentjs.com/downloads/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script> <input type="text" id="datetimepicker" />