jQuery：Bootstrap 格式为 hh:mm:ss 的时间选择器

Question

我正在寻找具有 hh:mm:ss 格式的 bootstrap 时间选择器。我在网上搜索过，但我只能找到 bootstrap 格式为 hh:mm 的时间选择器。

Answer 1

您应该使用 http://eonasdan.github.io/bootstrap-datetimepicker/ datetimePicker，将 dateTimePicker 的格式设置为 'hh:mm:ss'

你必须使用 - moment.js - 更多格式，你应该检查：http://momentjs.com/docs/#/displaying/format/

我创建了一个 JSFiddle。

HTML:

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

JS:

$(function () {
   $('#datetimepicker1').datetimepicker({
      format: 'hh:mm:ss'
   });
});

编辑

点击输入框打开：

$(function(){
$('#datetimepicker1').datetimepicker({
    format: 'hh:mm:ss',
    allowInputToggle: true
});

});

Answer 2

DEMO
HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 form-group">
            <label for="dd" class="sr-only">Time Pick</label>
            <input type="text" id="dd" name="dd" data-format="MM/DD/YYYY"      placeholder="date" class="form-control" />
        </div>
    </div>
</div>
</div>
<input type='button' id='clear' Value='Clear Date'>

JS

var Date = $('#dd').datetimepicker({
    format: 'DD-MM-YYYY hh:mm:ss',
})
$('#clear').click(function () {
    $('#dd').data("DateTimePicker").clear()
})

Answer 3

您好：这是执行格式解析的代码部分。如您所见，HH 和 H 用于 12 小时格式，秒数只需使用 ss 就像您的示例一样，但对于分钟您必须使用i或ii

setters_order = ['hh', 'h', 'ii', 'i', 'ss', 's', 'yyyy', 'yy', 'M', 'MM', 'm', 'mm', 'D', 'DD', 'd', 'dd', 'H', 'HH', 'p', 'P'],
    setters_map = {
      hh:   function (d, v) {
        return d.setUTCHours(v);
      },
      h:    function (d, v) {
        return d.setUTCHours(v);
      },
      HH:   function (d, v) {
        return d.setUTCHours(v == 12 ? 0 : v);
      },
      H:    function (d, v) {
        return d.setUTCHours(v == 12 ? 0 : v);
      },
      ii:   function (d, v) {
        return d.setUTCMinutes(v);
      },
      i:    function (d, v) {
        return d.setUTCMinutes(v);
      },
      ss:   function (d, v) {
        return d.setUTCSeconds(v);
      },
      s:    function (d, v) {
        return d.setUTCSeconds(v);
      },
      yyyy: function (d, v) {
        return d.setUTCFullYear(v);
      },
      yy:   function (d, v) {
        return d.setUTCFullYear(2000 + v);
      },
      m:    function (d, v) {
        v -= 1;
        while (v < 0) v += 12;
        v %= 12;
        d.setUTCMonth(v);
        while (d.getUTCMonth() != v)
          if (isNaN(d.getUTCMonth()))
            return d;
          else
            d.setUTCDate(d.getUTCDate() - 1);
        return d;
      },
      d:    function (d, v) {
        return d.setUTCDate(v);
      },
      p:    function (d, v) {
        return d.setUTCHours(v == 1 ? d.getUTCHours() + 12 : d.getUTCHours());
      }
    },

jQuery：Bootstrap 格式为 hh:mm:ss 的时间选择器

jQuery: Bootstrap timepicker with hh:mm:ss format

jquery

twitter-bootstrap-3

timepicker