DateTimePicker time picker in 24 hour but displaying in 12hr?

Question

I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ and it's working nicely but for one issue. I have a picker setup just from time as so:

$(function () {
    $('#startTime, #endTime').datetimepicker({
        format: 'hh:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

This sets the picker to 24 hour so I can select 19:00 as a time. But when I choose this time it displays as 07:00 in the input box. Here is the setup displaying the picker:

    <div class="input-group date timePicker" id="endTime">
        <input type='text' class="form-control" readonly="true"
            id="endTimeContent" /> <span class="input-group-addon"><span
            class="glyphicon glyphicon-time"></span> </span>
    </div>

Is there a specific data-format I can use for 24 hour in the input box?

Answer 1

Because the picker script is using moment.js to parse the format string, you can read the docs there for proper format strings.

But for 24Hr time, use HH instead of hh in the format.

$(function () {
    $('#startTime, #endTime').datetimepicker({
        format: 'HH:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

Answer 2

To show the correct 24H format, for example, only put

$(function () {
    $('#date').datetimepicker({
         format: 'DD/MM/YYYY HH:mm',
    });

});

Answer 3

$(function () {
    $('#startTime, #endTimeContent').datetimepicker({
        format: 'HH:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

your selector seems to be wrong,please check it

Answer 4

Just this!

$(function () {
    $('#date').datetimepicker({
         format: 'H:m',
    });

});

i use v4 and work well!!

Answer 5

I don't understand why the other friends tell you use HH, But after I test so many time, The correct 24 hour format is :

hh

.

I see it from : http://www.malot.fr/bootstrap-datetimepicker/

I don't know why they don't use the common type HH for 24 hour.....

I hope anyone could tell me if I'm wrong.....

Answer 6

With seconds!

$('.Timestamp').datetimepicker({
    format: 'DD/MM/YYYY HH:mm:ss'
});

To skip future dates:

$(function () {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datetimepicker,#datetimepicker1').datetimepicker({
        pickTime: false,
        format: "DD-MM-YYYY",  
        maxDate: new Date(currentYear, currentMonth, currentDate + 1)
    });
});

Answer 7

Meridian pertains to AM/PM, by setting it to false you're indicating you don't want AM/PM, therefore you want 24-hour clock implicitly.

$('#timepicker1').timepicker({showMeridian:false});

Answer 8

I know it's been quite some time since the question was asked. However, if it helps anyone this worked for me.

 $(function() {
    $('.datetimepicker').datetimepicker({
        format: 'MM-DD-YYYY HH:mm '
    });
});

Answer 9

You can also use the parameters "use24hours" and "language" to do this, as follows:

$(function () {
    $('.datetime').datetimepicker({
        language: 'pt-br',
        use24hours: true,
    });
});

Answer 10

'DD/MM/YYYY hh:mm A' => 12 hours 'DD/MM/YYYY HH:mm A' => 24 hours

Answer 11

this will display current ate & time. Working on my side perfectly

$("#datePicker").datetimepicker({
    format: 'DD-MM-YYYY HH:mm A',
    defaultDate: new Date(),
});

Answer 12

Perfectly worked for me

jQuery('#datetimepicker1').datetimepicker({
    use24hours: true,   
    format: "YYYY-MM-DD HH:mm ",
    defaultDate: new Date(),
    });

Answer 13

The catch is that hh is for format 12 hours and HH is for 24 hours.

24 hour format

$(function () {
    $('#customElement').datetimepicker({
        format: 'HH:mm',           
    });
});

12 hour format

$(function () {
    $('#customElement').datetimepicker({
        format: 'hh:mm',           
    });
});

Answer 14

Try this one, you need to use 'hh:mm':

$(document).ready(function () {
  $('body').on('click', '.form_datetime', function() {
    $(this).datetimepicker({
      format: "yyyy-mm-dd hh:mm",
      showMeridian: true,
      autoclose: true,
      todayBtn: true,
      pick12HourFormat: false   
    });

    $(this).trigger('focus');
  });
});

Answer 15

$('.timepicker').datetimepicker({
  format: "HH:mm:ss",
});

CAPITAL HH is for 24 hour and SMALL hh is for 12 hour inputs