如何通过 Bootstrap DateTimePicker 使用链接的 DateTime?
How to use linked DateTime using Bootstrap DateTimePicker?
我有一张包含出发日期和 return 日期的表格。而我想在return日期字段中设置最小日期是选择出发日期的日期。我已经将 id 放入 div 标签或输入标签中,但没有任何效果。你知道为什么吗?
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Departure<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_departure1" data-link-field="dtp_input1">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input1" name="res_departure" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Return<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_return1" data-link-field="dtp_input2">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input2" name="res_return" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
这是我的js
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data("DateTimePicker").setMinDate(e.date);
});
试试这个而不是你的代码
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date()
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data('DateTimePicker').minDate(new Date(e.timeStamp));
});
因为当你只谈论日期时,最好在jQuery ui
库上使用datepicker
,然后你可以使用出发日期的onSelect
事件,然后设置return 字段的最小日期。
onSelect: function(selectedDate)
{
$('#return').datepicker('option', 'minDate', selectedDate);
}
$('#res_departure1').datetimepicker().on('changeDate', function(ev) {
var departureDate = ev.date;
$('#res_return1').datetimepicker('setStartDate', departureDate);
});
$('#res_return1').datetimepicker().on('changeDate', function(ev) {
var returnDate = ev.date;
$('#res_departure1').datetimepicker('setEndDate', returnDate);
});
我有一张包含出发日期和 return 日期的表格。而我想在return日期字段中设置最小日期是选择出发日期的日期。我已经将 id 放入 div 标签或输入标签中,但没有任何效果。你知道为什么吗?
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Departure<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_departure1" data-link-field="dtp_input1">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input1" name="res_departure" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Return<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_return1" data-link-field="dtp_input2">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input2" name="res_return" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
这是我的js
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data("DateTimePicker").setMinDate(e.date);
});
试试这个而不是你的代码
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date()
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data('DateTimePicker').minDate(new Date(e.timeStamp));
});
因为当你只谈论日期时,最好在jQuery ui
库上使用datepicker
,然后你可以使用出发日期的onSelect
事件,然后设置return 字段的最小日期。
onSelect: function(selectedDate)
{
$('#return').datepicker('option', 'minDate', selectedDate);
}
$('#res_departure1').datetimepicker().on('changeDate', function(ev) {
var departureDate = ev.date;
$('#res_return1').datetimepicker('setStartDate', departureDate);
});
$('#res_return1').datetimepicker().on('changeDate', function(ev) {
var returnDate = ev.date;
$('#res_departure1').datetimepicker('setEndDate', returnDate);
});