我正在使用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
});
让我们做些小把戏。首先,我们将隐藏输入字段。然后,我们将按空格字符指定datetime值,以仅获取时间并将其设置为输入值。之后,我们将显示输入字段。
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>
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);