CODEWITHSUNDEEP
javascripttwitter-bootstrap
user2989367
user2989367

Reputation: 435

Using 24 hour time in bootstrap timepicker

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.

Upvotes: 26

Views: 201656

Answers (15)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

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

Upvotes: 13

Nageen
Nageen

Reputation: 1759

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

Upvotes: -1

antelove
antelove

Reputation: 3348

<script>    
    $(function () {

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

    }    
</script>

Example bootstrap datetimepicker eonasdan

Upvotes: 0

Maik Marinho
Maik Marinho

Reputation: 1

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

Upvotes: -2

TanvirChowdhury
TanvirChowdhury

Reputation: 2445

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

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

Upvotes: 3

&#214;MER TAŞCI
&#214;MER TAŞCI

Reputation: 566

The below code is correct answer for me.

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

Upvotes: 0

oliver34
oliver34

Reputation: 330

"YYYY-MM-DD HH:mm:ss" => 24 hours format;

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

the difference is letter 'H'

Upvotes: 14

Athi narayanan
Athi narayanan

Reputation: 11

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

Upvotes: 1

Mahesh P.
Mahesh P.

Reputation: 51

This will surely help on bootstrap timepicker

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

Upvotes: 1

Jerreck
Jerreck

Reputation: 3010

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

Upvotes: 10

Oskar
Oskar

Reputation: 2562

And this works for me:

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

Upvotes: 6

Vladimir Salguero
Vladimir Salguero

Reputation: 5947

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

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

Upvotes: 49

Dennis
Dennis

Reputation: 936

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.

Upvotes: 26

Priyankar Saha
Priyankar Saha

Reputation: 349

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

This will work.

Upvotes: 27

Esuk
Esuk

Reputation: 131

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>

Upvotes: 10

Related Questions