在bootstrap timepicker中使用24小时时间

use*_*367 17 javascript twitter-bootstrap

嗨我在bootstrap上使用http://eonasdan.github.io/bootstrap-datetimepicker/,特别是4号示例.

我添加了这个属性来取消PM的东西,并能够在小部件本身上使用24个系统:

格式:'hh:mm',

但是让我说我​​在04:00在输入本身上显示的小部件上选择16:00,而不是16:00.

我在文档中找不到任何关于此的内容,所以如果有人知道修复此问题,那将非常感激.

谢谢.

Vla*_*ero 39

使用大写字母表示小时HH = 24小时格式hh = 12小时格式

$('#fecha').datetimepicker({
   format : 'DD/MM/YYYY HH:mm'
});
Run Code Online (Sandbox Code Playgroud)


Den*_*nis 20

这对我有用:

$(function () {
    $('#datetimepicker5').datetimepicker({
        use24hours: true,
        format: 'HH:mm'
    });
});
Run Code Online (Sandbox Code Playgroud)

重要说明:它仅在我使用大写"H"作为时间格式时才起作用.

  • 注意:截至2015年7月27日,"use24hours"选项已被删除.将格式更改为"HH:mm"将导致24小时制. (7认同)
  • 如果您还需要月/日/年,请使用以下命令:.datetimepicker({format:'mm / DD / YYYY HH:mm'}); (2认同)

小智 17

$('.time-picker').timepicker({
            showMeridian: false     
        });
Run Code Online (Sandbox Code Playgroud)

这会奏效.


小智 10

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

"YYYY-MM-DD hh:mm:ss" => 12 hours format;
Run Code Online (Sandbox Code Playgroud)

区别是字母'H'


小智 9

看起来你必须为data-date-*设置格式选项.这个例子对我有24小时的支持.

<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>
Run Code Online (Sandbox Code Playgroud)


Jer*_*eck 8

编辑: 这个帖子有比这个更好的答案.在我回答的时候,我只是掌握了JavaScript.具体来说,请看 两个.

如果在该脚本的开发版本中进行搜索,则会调用一个函数use24hours来查找true或false的值.

添加use24hours:true可能会为您完成工作.像这样:

$(function () {
    $('#datetimepicker5').datetimepicker({
        use24hours: true
    });
});
Run Code Online (Sandbox Code Playgroud)

  • 带有隐藏字母的小时数:格式:'HH:mm', (4认同)

Dee*_*ath 7

要选择24小时时间格式的时间,请使用

$('#datetimepicker').datetimepicker({
            format: 'HH:mm'
 });
Run Code Online (Sandbox Code Playgroud)

如果您想选择带日期的24小时时间格式,请使用

$('#datetimepicker').datetimepicker({
         format: 'MM/DD/YYYY HH:mm'
 });
Run Code Online (Sandbox Code Playgroud)

示例:

$(function() {
  $('#datetimepicker1').datetimepicker({
            format: 'HH:mm'
  });
  
  $('#datetimepicker2').datetimepicker({
            format: 'MM/DD/YYYY HH:mm'
  });
});
Run Code Online (Sandbox Code Playgroud)
<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">
        <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>
        <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>
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有关更多信息


Osk*_*kar 6

这对我有用:

$(function () {
    $('#datetimepicker5').datetimepicker({
        format: 'HH:mm'
    });
});
Run Code Online (Sandbox Code Playgroud)