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?

remove this pick12HourFormat and check – Karthick Kumar Feb 18 '14 at 08:03 — Karthick Kumar, Feb 18 '14 at 08:03

Benjam · Answer 1 · 2014-02-18T08:10:52.833

35

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

edited Feb 18 '14 at 08:10

answered Feb 18 '14 at 08:05

Benjam

4,994
3
26
34

score 17 · Answer 2 · edited Dec 15 '14 at 21:21

17

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

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

});

edited Dec 15 '14 at 21:21

Saifur

15,084
6
43
68

answered Dec 15 '14 at 20:58

Piccin

171
1
4

score 15 · Answer 3 · answered Feb 18 '14 at 08:04

15

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

your selector seems to be wrong,please check it

answered Feb 18 '14 at 08:04

Karthick Kumar

2,364
1
14
28

Ah so simple, I just assumed that part was all working as I was seeing the correct 24 format in the time picker. – RegDHunter Feb 18 '14 at 08:07

score 7 · Answer 4 · edited May 03 '16 at 14:59

7

Just this!

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

});

i use v4 and work well!!

edited May 03 '16 at 14:59

tjd

4,014
1
22
33

answered May 03 '16 at 14:54

Gustavo Miño

71
1
4

score 4 · Answer 5 · answered Dec 08 '15 at 12:08

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

score 3 · Answer 6 · edited Oct 13 '16 at 07:20

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

score 2 · Answer 7 · edited Jan 06 '17 at 06:23

2

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

edited Jan 06 '17 at 06:23

clearlight

10,772
11
48
65

answered Jan 06 '17 at 05:17

Aaska Patel

422
6
21

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. – clearlight Jan 06 '17 at 06:22

score 1 · Answer 8 · answered Feb 01 '18 at 04:44

1

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

answered Feb 01 '18 at 04:44

Sagar Nair

97
1
8

score 0 · Answer 9 · answered Jan 04 '15 at 21:40

0

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

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

answered Jan 04 '15 at 21:40

William Rodrigues

152
1
3

score 0 · Answer 10 · answered Apr 27 '18 at 11:46

0

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

answered Apr 27 '18 at 11:46

Jegan

1

While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) 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. – Matheus Cuba Apr 27 '18 at 11:49

score 0 · Answer 11 · answered Dec 20 '19 at 06:27

0

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

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

answered Dec 20 '19 at 06:27

Tayyab Hayat

247
2
15

score 0 · Answer 12 · edited Oct 05 '20 at 12:42

0

Perfectly worked for me

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

edited Oct 05 '20 at 12:42

David Buck

3,439
29
24
31

answered Oct 05 '20 at 03:08

T D S

1
2

Nole · Answer 13 · 2020-11-03T13:55:05.140

0

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

edited Nov 03 '20 at 13:55

answered Nov 03 '20 at 13:46

Nole

561
5
9

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

13 Answers13

Linked