将字段留空但显示开始时间？

Question

我正在尝试设置当天的开始时间。当时间选择器显示时，它一直显示 12 : 00 AM。我希望时间从上午 10 : 00 开始，然后增加 30 分钟。我正在使用 enabledHours 来限制输入。我还使用 useCurrent: false 以便在加载页面时输入字段为空。

基本上我在用这个：

format: 'LT',
stepping: 30,
enabledHours: [10, 11, . . . 19],
minDate: moment().hour(10),
useCurrent: false,
showClose: true,
allowInputToggle: true

我有一个单独的日期输入，我只想显示时间。

感谢任何帮助。

Answer 1

为日期时间选择器设置开始日期的最简单方法是使用 defaultDate 选项。设置此选项后，选择器输入字段将填充给定日期，如您在实际示例中所见：

$("#datetimepicker1").datetimepicker({
  format: 'LT',
  stepping: 30,
  minDate: moment({hour: 10}),
  maxDate: moment({hour: 19, minutes: 30}),
  defaultDate: moment({hour: 10}),
  useCurrent: false,
  showClose: true,
  allowInputToggle: true
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/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.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

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

如果输入必须是初始空白，那么你必须做一些复杂的事情。如果没有设置之前的日期，你可以监听 dp.show event and set a given date (using date 方法。

这是一个实际工作的例子：

$("#datetimepicker1").datetimepicker({
  format: 'LT',
  stepping: 30,
  minDate: moment({hour: 10}),
  maxDate: moment({hour: 19, minutes: 30}),
  useCurrent: false,
  showClose: true,
  allowInputToggle: true
}).on('dp.show', function(){
  var date = $(this).data("DateTimePicker").date();
  if( !date ){
    var defaultDate = moment({hour: 10});
    $(this).data("DateTimePicker").date(defaultDate);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/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.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

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

请注意，我使用 minDate and maxDate instead of enabledHours, since you are selecting only time. Moreover I used moment({hour: 10}) instead of moment().hour(10) because the first (moment({unit: value, ...});) 默认为 0 表示分钟、秒、毫秒，而后者考虑当前的分钟、秒等

将字段留空但显示开始时间？

Leaving field blank but showing a start hour?

eonasdan-datetimepicker