如果输入值仅包含时间，则初始化 bootstrap 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 错误：

"Uncaught TypeError: Cannot read property 'getTime' of undefined"

但是如果我像这样输入值 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

我们来玩点小把戏吧。首先，我们将隐藏输入字段。然后我们将日期时间值除以 space 字符以仅获取时间并将其设置为输入值。之后我们将显示输入字段。

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>

Answer 2

在 datetimepicker 初始化后在输入字段中设置值，然后一切正常。

var hour_from = "13:00";

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

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

$('#hour_from').val(hour_from);

Answer 3

几年后我遇到了类似的问题，并用这样的数据属性解决了它。

让我们获取问题中发布的所有代码（第二部分，您在其中添加了值）。

我在输入、数据日期和数据输入值中添加了一些数据属性，并将实际值留空。

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

现在让我们像发布的问题一样初始化日期选择器，并在下面添加三行。

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

//taking data attr and storing it to value
var inputvalue = $('#hour_from').data('inputvalue');
$('#hour_from').val(inputvalue);

//informing datepicker the value changed (will work without this)
$('#datetimepicker_hour1').datetimepicker('update');

这是工作中的整个示例 fiddle。

希望这对某人有所帮助；D

如果输入值仅包含时间，则初始化 bootstrap datetimepicker 时出现 JS 错误

JS error when initializing bootstrap datetimepicker if input value contains only time

javascript

jquery

datetimepicker

smalot-datetimepicker