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/Y H: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" />