Question

我正在尝试设置当天的开始时间。当时间选择器显示时，它一直在说上午12点。我希望时间从上午10点开始，增加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选项。设置此选项后，选择器输入字段将填充给定日期，如实时示例中所示：

＆＃13;

$("#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
});

＆＃13;

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

＆＃13;

如果输入必须是初始空白，那么你必须做一些有点复杂的事情。如果没有设置上一个日期，您可以收听dp.show事件并设置指定日期（使用date方法）。

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

＆＃13;

$("#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);
  }
});

＆＃13;

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

＆＃13;

请注意，我使用minDate和maxDate代替enabledHours，因为您只选择了时间。此外，我使用moment({hour: 10})而不是moment().hour(10)，因为第一个（moment({unit: value, ...});）默认为0分钟，秒，毫秒，而后者考虑当前分钟，秒等。

将现场留空但显示开始时间？

1 个答案: