具有24小时格式的TimePicker

问题描述 投票:0回答:7

我在我的项目中使用时间选择器,但我需要在24小时内的这个时间而不是上午,下午这是我的代码

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

但是此代码给了我12个小时的格式,例如这样

04:00 PM  

但是我想要的是

16:00
jquery timepicker
7个回答
2
投票

如果您使用的是jQuery timepicker


1
投票

如果使用引导程序,则>

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

或者您也可以尝试此方法,未经测试:


1
投票

您可以使用此格式获取24小时格式:

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

0
投票

您可以使用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>

请注意,这在FireFox中不起作用。


0
投票

尝试下面的代码

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

0
投票

对于jQuery timepicker,您需要将'timeFormat'选项与PHP的date()格式语法一起使用:

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

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


0
投票

您可以使用此

$('.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);
});
© www.soinside.com 2019 - 2024. All rights reserved.