在引导时间选择器中使用 24 小时时间答案

【问题标题】：Using 24 hour time in bootstrap timepicker在引导时间选择器中使用 24 小时时间
【发布时间】：2014-01-28 01:12:03
【问题描述】：

您好，我在引导程序上使用http://eonasdan.github.io/bootstrap-datetimepicker/，特别是示例编号 4。

我添加了这个属性来去掉 PM 的东西，并且能够在小部件本身上使用 24 系统：

格式：'hh:mm'，

但是假设我在小部件上选择了 16:00，它显示在输入本身的 04:00，而不是 16:00。

我在文档中找不到任何关于此的内容，因此如果有人知道此问题的修复方法，将不胜感激。

谢谢。

【问题讨论】：

你也许可以在 cmets here找到一些信息
是的，我将语言设置为 en，没有帮助。你的意思是我可能会在 cmets 中找到信息？
我遇到这个问题的时间最长，然后发现是我最初的输入输出字符串没有被输入 24 小时格式。一旦我修复了一切都开始工作。 :)
HH:mm 表示 24 小时制 hh:mm 表示 12 小时制。 stackoverflow.com/a/21847556

标签： javascript twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这对我有用：

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

重要提示：它只适用于我使用大写“H”作为时间格式。

【讨论】：

注意：至少从 2015 年 7 月 27 日起，use24hours 选项已被删除。将格式更改为 HH:mm 将产生 24 小时制。
如果您还需要月/日/年，请使用：.datetimepicker({ format: 'mm/DD/YYYY HH:mm' });

【解决方案3】：

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

这会起作用。

【讨论】：

完美。 //时间选择器 $(".timepicker").timepicker({ showInputs: false, showMeridian: false });

【解决方案4】：

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

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

区别是字母'H'

【讨论】：

很好的答案日期时间格式适用于datetimepicker 和daterangepicker

【解决方案5】：

要仅选择 24 小时制的时间，请使用

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

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

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

例子：

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

For more info

【讨论】：

【解决方案6】：

编辑：在这个线程上有比这个更好的答案。在我回答的时候，我刚刚掌握了 JavaScript 的窍门。具体见these two。

如果您在该脚本的开发版本中进行搜索，则会有一个名为 use24hours 的函数查找 true 或 false 的值。

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

$(function () {
    $('#datetimepicker5').datetimepicker({
        use24hours: true
    });
});

【讨论】：

哎呀，那个'-'应该是一个'='。另外，我还没有测试过这个。我提交这个作为答案只是为了显示那段代码。如果你今晚还没有弄清楚，我会写一个 jsfiddle 看看我们是否可以让它工作。这看起来像是一个与引导程序一起使用的很酷的脚本:)
你确定它不应该是“:”吗？
选项 use24hours 无法识别！
注意：至少从 27/07/2015 起，use24hours 选项已被删除。将格式更改为 HH:mm 将产生 24 小时制。

【解决方案7】：

看来您必须使用 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>

【讨论】：

【解决方案8】：

这对我有用：

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

【讨论】：

【解决方案9】：

如果您使用的是引导时间选择器。使用 showMeridian 属性将时间选择器设为 24 小时格式。

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

【讨论】：

【解决方案10】：

这肯定会对引导时间选择器有所帮助

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

【讨论】：

【解决方案11】：

看来您必须使用 data-date-* 设置格式选项。此示例适用于我，提供 24 小时支持。

【讨论】：

【解决方案12】：

下面的代码对我来说是正确的答案。

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

【讨论】：

【解决方案13】：

<script>    
    $(function () {

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

    }    
</script>

Example bootstrap datetimepicker eonasdan

【讨论】：

【解决方案14】：

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

})

为我工作。

【讨论】：

【解决方案15】：

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

【讨论】：