CODEWITHSUNDEEP
jquerytimepicker
Maj.jad
Maj.jad

Reputation: 71

TimePicker with 24 hour format

I using timepicker in my project but I need this time in 24 hour without am,pm this is my code

<div class="bootstrap-timepicker" >
<label for="email" class="col-sm-2 control-label">From Time</label>
<input type="text" id="from_time" class="form-control timepicker" style="width: 30%;" >
<label for="email" class="col-sm-2 control-label">To Time</label>
<input type="text" id="to_time" class="form-control timepicker" style="width: 30%;" >
<!-- /.input group -->
</div>

but this code give me 12 hour format like this 

04:00 PM

but what I want 

16:00

Upvotes: 3

Views: 51540

Answers (11)

KnausO
KnausO

Reputation: 11

It is this simple, just use HH instead of hh:

$('#dostava_vreme').timepicker({
        timeFormat: 'HH:mm'
    });

Upvotes: 0

amzad khan
amzad khan

Reputation: 1

Try the below code:

<html>
<head> ... </head>
<body>
  ...
  <form>
    <input type="text" class="timepicker" name="timepicker" />
  </form>
</body>

<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

<script type="text/javascript">
  $(document).ready(function() {
    $('.timepicker').timepicker({
      timeFormat: 'HH:mm',
      dropdown: true,
      scrollbar: true
      use24hours: true,
      interval: 60 
    });
  });
</script>
</html>

Upvotes: 0

hackernewbie
hackernewbie

Reputation: 1712

Try this:

This is how I have added the time field.

<input id="timepicker3" type="text" class="form-control event-time-from" name="event-time-from" value="10:30 AM" data-provide="timepicker" placeholder="HH:MM" required>

This is what makes it accept time in 24-hour format.

$(".event-time-from").timepicker({ showMeridian: !1});

Upvotes: 0

SeniorDeveloper
SeniorDeveloper

Reputation: 906

This works for me.

$('input[name="entry_deadline_time"]').daterangepicker({ singleDatePicker: true, showDropdowns: false, timePicker: true, timeFormat: 'HH:mm:ss p', locale: { format: 'MM-DD-YYYY HH:mm:ss' } });

Upvotes: 1

Ricardo Tiller&#237;a Ochoa
Ricardo Tiller&#237;a Ochoa

Reputation: 11

You can use this

$('.timepicker').timepicker({
    disableMousewheel: true,
    icons: {
        up: 'la la-angle-up',
        down: 'la la-angle-down'
    },
    showSeconds: true,
    showMeridian: false,
    defaultTime: new Date()
}).on('changeTime.timepicker', function (e) {

    var hours = ('0' + e.time.hours).slice(-2);
    var minutes = ('0' + e.time.minutes).slice(-2);
    var seconds = ('0' + e.time.seconds).slice(-2);

    $(this).val(hours + ':' + minutes + ':' + seconds);
});

Upvotes: 1

Mahrez BenHamad
Mahrez BenHamad

Reputation: 2068

You can use this to get 24-hour format:

$('input.timepicker').timepicker({
timeFormat: 'h:i',});

Upvotes: 2

Francisco Saez
Francisco Saez

Reputation: 21

For the jQuery timepicker you need to use the 'timeFormat' option with PHP's date() formatting syntax:

$('.time').timepicker({
  'timeFormat': 'H:i'
});

Documentation: https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery

Upvotes: 2

Ram Singh
Ram Singh

Reputation: 6918

if you are using the bootstrap 

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

OR you can try this one as well, not tested:

  $('input.timepicker').timepicker({ timeFormat: 'HH:mm:ss p' });

Hope this helps you. Enjoy

Upvotes: 3

Sanjit Bhardwaj
Sanjit Bhardwaj

Reputation: 893

if you are using jquery timepicker

$('input.timepicker').timepicker({ timeFormat: 'HH:mm:ss', });

if you are using bootstrap timepicker 

$(function () {
    $('#datetimepicker4').datetimepicker({
        pickDate: false,
        minuteStepping:30,
        format: 'hh:mm',
        pickTime: true,
        defaultDate: new Date(1979, 0, 1, 8, 0, 0, 0),
        language:'en',
        use24hours: true
    });
});

Upvotes: 5

Anoop Saini
Anoop Saini

Reputation: 307

Try the below code

<html>
<head> ... </head>
<body>
...
<form ... >
...
<input type="text" class="timepicker" name="timepicker" />
...
</form>
...
</body>

<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

<script type="text/javascript">
       $(document).ready(function() {
         $('.timepicker').timepicker({
                timeFormat: 'HH:mm',
                interval: 60,
                defaultTime: '10',
              });
       });
     </script>
</html>

Upvotes: 0

Barskey
Barskey

Reputation: 463

You could use type:"time".

<div class="bootstrap-timepicker" >
  <label for="email" class="col-sm-2 control-label">From Time</label>
  <input type="time" id="from_time" class="form-control timepicker" style="width: 30%;" >
  <label for="email" class="col-sm-2 control-label">To Time</label>
  <input type="time" id="to_time" class="form-control timepicker" style="width: 30%;" >
  <!-- /.input group -->
</div>

Note that this doesn't work in FireFox.

Firefox's time control is very similar to Chrome's, except that it doesn't have the up and down arrows and it is a 12 hour clock (with an additional slot to specify AM or PM).

Upvotes: 0

Related Questions