如何在Eonasdan bootstrap datetimepicker中禁用日期字段?

时间:2016-12-21 01:17:09

标签: bootstrap-datetimepicker eonasdan-datetimepicker

我想为我的项目使用Eonasdan bootstrap datetimepicker Version 4。

要求是找到时间范围。我的问题是: - 是否可以在没有日期的情况下设置2次(换句话说,禁用日期并且只有时间范围)。

非常感谢您的帮助。 感谢。

1 个答案:

答案 0 :(得分:1)

您可以使用format: HH:mm将该组件用作时间戳。您可以使用disabledTimeIntervals限制可选时间。

这是一个工作示例,禁用从0到8和从15到18的时间:



$('#datetimepicker').datetimepicker({
  disabledTimeIntervals: [
    [moment({ h: 0 }), moment({ h: 8 })],
    [moment({ h: 15 }), moment({ h: 18 })]
  ],
  defaultDate: moment("12:00", 'HH:mm'),
  format: 'HH:mm'
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <h6>datetimepicker</h6>
    <input type="text" class="form-control" id="datetimepicker"/>
  </div>
</div>
&#13;
&#13;
&#13;