如果输入值仅包含时间,则在初始化引导程序datetimepicker时出现JS错误

Question

我正在使用DateTime Picker,我想加载一个唯一的时间选择器.

我像这样初始化我的输入字段并且运行良好.这让我只挑选jsfiddle:

<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" />
</div>

$('#datetimepicker_hour1').datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1
});

如果我想在预先选择时间的情况下初始化此输入,则会发生JS错误:

"未捕获的TypeError:无法读取未定义的属性'getTime'"

但是,如果我将输入值设置为这样2017-12-24 13:00,输入时间选择器就具有该值.这很好,但我希望第一个值可能只是时间,而不是完整的日期时间.

这是jsfiddle预加载的值.我希望这个值可以是13:00:

<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" />
</div>

$('#datetimepicker_hour1').datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1
});

Answer 1

让我们来做一个小技巧。首先我们将隐藏输入字段。然后，我们将日期时间值除以空格字符以仅获取时间并将其设置为输入值。之后我们将显示输入字段。

var $hour_from = $("#hour_from");
$hour_from.datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1,
  timeFormat: 'hh:mm',

});
$hour_from.val($hour_from.val().split(' ')[1])
$hour_from.show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" data-date-format="hh:ii" style="display:none;" />
</div>