25

Hi im using http://eonasdan.github.io/bootstrap-datetimepicker/ on bootstrap, specifically example number 4.

I added this property to take away the PM thing and be able to use 24 system on the widget itself:

format: 'hh:mm',

But lets say I pick 16:00 on the widget it shows up at 04:00 on the input itself as opposed to 16:00.

I could not find anything in the documentation about this so if anyone knows a fix for this it would be really appreciated.

Thanks.

4
  • You might be able to find some info in the comments here
    – user247702
    Commented Jan 9, 2014 at 13:15
  • Yes i set the language to en, didnt help. and what do you mean I might be able to find info in the comments? Commented Jan 9, 2014 at 13:23
  • I was having this problem for the longest time and then found it was my initial inout string that wasn't getting put into 24 hour format. Once I fixed that everything started working. :) Commented Jul 12, 2014 at 18:18
  • 1
    HH:mm for 24 hour time hh:mm for 12 hour time. stackoverflow.com/a/21847556
    – user3983361
    Commented Aug 27, 2014 at 14:33

15 Answers 15

49

Use capitals letter for hours HH = 24 hour format an hh = 12 hour format

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

26
$('.time-picker').timepicker({
            showMeridian: false     
        });

This will work.

1
  • 1
    Perfect. //Timepicker $(".timepicker").timepicker({ showInputs: false, showMeridian: false }); Commented Nov 22, 2018 at 19:47
26

This works for me:

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

Important: It only worked at the point I used uppercase "H" as time format.

2
  • 9
    Note: as of at least 27/07/2015 the use24hours option has been removed. Changing the format to HH:mm will result in a 24 hour clock.
    – Wibbler
    Commented Jul 27, 2015 at 8:43
  • 2
    If you also need the month/day/year, use this: .datetimepicker({ format: 'mm/DD/YYYY HH:mm' }); Commented Aug 2, 2015 at 20:08
14
"YYYY-MM-DD HH:mm:ss" => 24 hours format;

"YYYY-MM-DD hh:mm:ss" => 12 hours format;

the difference is letter 'H'

1
  • Great answer datetime format works for datetimepicker and daterangepicker Commented Aug 8, 2018 at 5:23
13

To pick only time with 24 hr time format, use

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

If you want to pick 24 hr time format with date also, use

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

Example :

$(function() {
  $('#datetimepicker1').datetimepicker({
            format: 'HH:mm'
  });
  
  $('#datetimepicker2').datetimepicker({
            format: 'MM/DD/YYYY HH:mm'
  });
  $('#datetimepicker3').datetimepicker({
      format: 'hh:mm A',
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <span>Select 24 hour time format</span>
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <br/>
        <span>Select time with Date</span>
        <div class='input-group date' id='datetimepicker2'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <br/>
        <span>Select 12 hour time format</span>
        <div class='input-group date' id='datetimepicker3'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

For more info

10

EDIT: There are much better answers on this thread than this one. I was just getting the hang of JavaScript at the time I answered. Specifically, see these two.

If you search within the development version of that script, there's a function called use24hours that looks for a value of either true or false.

Adding use24hours:true might do the job for you. Like so:

$(function () {
    $('#datetimepicker5').datetimepicker({
        use24hours: true
    });
});
4
  • Whoops, that '-' was supposed to be an '='. Also, I haven't tested this yet. I submitted this as an answer only to show that bit of code. If you haven't figured it out by tonight, I'll write-up a jsfiddle to see if we can get it working. This looks like a cool script to use with bootstrap :)
    – Jerreck
    Commented Jan 9, 2014 at 13:57
  • are you sure its not supposed to be ":"? Commented Jan 9, 2014 at 13:58
  • option use24hours is not recognized!
    – aldrien.h
    Commented Sep 21, 2017 at 10:57
  • Note: as of at least 27/07/2015 the use24hours option has been removed. Changing the format to HH:mm will result in a 24 hour clock.
    – aldrien.h
    Commented Sep 21, 2017 at 10:59
10

It looks like you have to set the option for the format with data-date-*. This example works for me with 24h support.

<div class="form-group">
    <div class="input-group date timepicker"
        data-date-format="HH:mm"
        data-date-useseconds="false"
        data-date-pickDate="false">

        <input type="text" name="" />
        <div class="input-group-addon">
            <i class="fa fa-clock-o"></i>
        </div>
    </div>
</div>
6

And this works for me:

$(function () {
    $('#datetimepicker5').datetimepicker({
        format: 'HH:mm'
    });
});
3

if you are using bootstrap time picker. use showMeridian property to make the time picker 24 hours format.

$('.time-picker').timepicker({
            showMeridian: false     
        });
1

This will surely help on bootstrap timepicker

format :"DD:MM:YYYY HH:mm"
0
1

It looks like you have to set the option for the format with data-date-*. This example works for me with 24h support.

0
0

The below code is correct answer for me.

 $('#datetimepicker6').datetimepicker({
                    format : 'YYYY-MM-DD HH:mm'
                });
0
<script>    
    $(function () {

        /* setting time */
        $("#timepicker").datetimepicker({
            format : "HH:mm:ss"
        });

    }    
</script>

Example bootstrap datetimepicker eonasdan

-1
<input type="text" name="time" data-provide="timepicker"  id="time" class="form-control" placeholder="Start Time" value="" />


$('#time').timepicker({
        timeFormat: 'H:i',
        'scrollDefaultNow'      : 'true',
        'closeOnWindowScroll'   : 'true',
        'showDuration'          : false,
        'ignoreReadonly'        : true,

})

work for me.

-2
//Timepicker
$(".timepicker").timepicker({
  showInputs: false,
  showMeridian: false //24hr mode 
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.