[javascript] 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.

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

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

the difference is letter 'H'

This will surely help on bootstrap timepicker

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

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

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

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

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

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

The below code is correct answer for me.

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

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

<script>    
    $(function () {

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

    }    
</script>

Example bootstrap datetimepicker eonasdan

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.

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

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>

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() {_x000D_
  $('#datetimepicker1').datetimepicker({_x000D_
            format: 'HH:mm'_x000D_
  });_x000D_
  _x000D_
  $('#datetimepicker2').datetimepicker({_x000D_
            format: 'MM/DD/YYYY HH:mm'_x000D_
  });_x000D_
  $('#datetimepicker3').datetimepicker({_x000D_
      format: 'hh:mm A',_x000D_
  });_x000D_
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>_x000D_
_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class='col-sm-6'>_x000D_
      <div class="form-group">_x000D_
        <span>Select 24 hour time format</span>_x000D_
        <div class='input-group date' id='datetimepicker1'>_x000D_
          <input type='text' class="form-control" />_x000D_
          <span class="input-group-addon">_x000D_
            <span class="glyphicon glyphicon-calendar"></span>_x000D_
          </span>_x000D_
        </div>_x000D_
        <br/>_x000D_
        <span>Select time with Date</span>_x000D_
        <div class='input-group date' id='datetimepicker2'>_x000D_
          <input type='text' class="form-control" />_x000D_
          <span class="input-group-addon">_x000D_
            <span class="glyphicon glyphicon-calendar"></span>_x000D_
          </span>_x000D_
        </div>_x000D_
        <br/>_x000D_
        <span>Select 12 hour time format</span>_x000D_
        <div class='input-group date' id='datetimepicker3'>_x000D_
          <input type='text' class="form-control" />_x000D_
          <span class="input-group-addon">_x000D_
            <span class="glyphicon glyphicon-calendar"></span>_x000D_
          </span>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

For more info

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

This will work.

And this works for me:

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