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=".5.20/jquery.datetimepicker.css" rel="stylesheet" />
<script src=".0.0/jquery.min.js"></script>
<script src=".js"></script>
<script src=".5.20/jquery.datetimepicker.full.min.js"></script>

<input type="text" id="datetimepicker" />

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./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://momentjs./downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<input type="text" id="datetimepicker" />

• javascript
• jquery
• datetimepicker

Share Improve this question Follow edited Aug 28, 2019 at 12:45 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Aug 28, 2019 at 12:38 MosdMosd 1,6822020 silver badges2222 bronze badges 5

• 1 He is using it to format the date inside the input – Webdeveloper_Jelle Commented Aug 28, 2019 at 12:46
• Also change format to 'DD/MM/YYYY HH:mm'. MM stands for month and mm minutes. – Chiffie Commented Aug 28, 2019 at 12:46
• @RoryMcCrossan, i removed that and set my format to : d/m/Y H:i and it seems to work, but it dont show minutes, it just shows 00 – Mosd Commented Aug 28, 2019 at 12:58
• 1 That's what it should show. The time goes up in increments of 1 hour, on the hour. – Rory McCrossan Commented Aug 28, 2019 at 12:59
• any way to force it to show minutes...is a bit unfortable to tell users they can just enter the minutes – Mosd Commented Aug 28, 2019 at 13:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://momentjs./downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<input type="text" id="datetimepicker" />

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://momentjs./downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>


<input type="text" id="datetimepicker" />