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?

Impeachment

remove this pick12HourFormat and check – Wicklow

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            
    });
});

Ygerne

Answer 2

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

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

});

Tailpipe

Answer 3

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

your selector seems to be wrong,please check it

Wicklow

Ah so simple, I just assumed that part was all working as I was seeing the correct 24 format in the time picker. – Impeachment

Answer 4

Just this!

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

});

i use v4 and work well!!

Courtly

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.....

Wiltonwiltsey

This the right and acceptable answer – Sushi

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)
    });
});

Verdha

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});

Renal

Please describe what that fix is. StackOverflow doesn't like code-only answers because it makes it harder for people to figure out the intention and if it's even worth studying the code at all. If you say what it does and how it solves the problem, people can figure out if they want to invest time in your answer. I understand it seems obvious to you and to me what this one line of code does, but it won't for everyone who may be looking over the answers. – Georgiannageorgianne

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 '
    });
});

Helfand

Answer 9

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

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

Sematic

Answer 10

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

Immersion

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Mori

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(),
});

Tolland

Answer 12

Perfectly worked for me

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

Periphrastic

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',           
    });
});

Warrington

How can we remove repetition of 1 to 12 2 times I am using telerik blazor ? docs.telerik.com/blazor-ui/components/timepicker/… – Hayseed

This comment is related to DateTimePicker library eonasdan.github.io/bootstrap-datetimepicker . That one that you ask is some other library. – Warrington

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');
  });
});

Rouault

Answer 15

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

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

Schaeffer