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.
Use capitals letter for hours HH = 24 hour format an hh = 12 hour format
$('#fecha').datetimepicker({
format : 'DD/MM/YYYY HH:mm'
});$('.time-picker').timepicker({
showMeridian: false
});
This will work.
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.
"YYYY-MM-DD HH:mm:ss" => 24 hours format;
"YYYY-MM-DD hh:mm:ss" => 12 hours format;
the difference is letter ‘H’
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>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
});
});
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>
And this works for me:
$(function () {
$('#datetimepicker5').datetimepicker({
format: 'HH:mm'
});
});
if you are using bootstrap time picker.
use showMeridian property to make the time picker 24 hours format.
$('.time-picker').timepicker({
showMeridian: false
});
This will surely help on bootstrap timepicker
format :"DD:MM:YYYY 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.
The below code is correct answer for me.
$('#datetimepicker6').datetimepicker({
format : 'YYYY-MM-DD HH:mm'
});
<script>
$(function () {
/* setting time */
$("#timepicker").datetimepicker({
format : "HH:mm:ss"
});
}
</script>
<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.
//Timepicker
$(".timepicker").timepicker({
showInputs: false,
showMeridian: false //24hr mode
});
