添加动态 HTML 字段作为时间
Adding dynamic HTML fields as time
我正在使用 Bootstrap 时间选择器 (https://github.com/eternicode/bootstrap-datepicker) 作为将动态生成的时间选择器输入字段。我能够创建字段,但无法将时间选择器对象附加到它们。
下面是部分工作代码:Code on JSFIDDLE
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.eventStartDate input').datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$(".eventEndDate input").datepicker({
autoclose: true,
startDate: t
});
});
这里正在工作fiddle
HTML:
<div class="row">
<div class="multi-field-wrapper">
<div class="multi-fields alldates">
<div class="multi-field" id="multi-field1">
<div class="form-group eventStartDate col-xs-3">
<label>Start Date</label>
<input type="text" class="form-control start-date-picker" placeholder="">
<span class="alert-message" data-alertid="startdate"></span>
</div>
<div class="form-group eventEndDate col-xs-3">
<label>End Date</label>
<input type="text" class="form-control end-date-picker" placeholder="">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<div class="form-group">
<label>Add more</label>
<span class="input-group-btn">
<button class="btn btn-default add-time-field" type="button">+</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default remove-time-field" type="button">-</button>
</span>
</div>
</div>
</div>
</div>
如您所见,我稍微调整了它的结构(从 multi-field
div 中删除了 add/remove 按钮)
JavaScript:
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.start-date-picker').datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$(".end-date-picker").datepicker({
autoclose: true,
startDate: t
});
});
$(".add-time-field").click(function(e) {
var $div = $('div[id^="multi-field"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
//Insure that id property is unique
var $clone = $div.clone().prop('id', 'multi-field'+num );
$('.alldates').append($clone);
var $startDate = $clone.find('.start-date-picker').first();
$startDate.val('');
var $endDate = $clone.find('.end-date-picker').first();
$endDate.val('');
$startDate.datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$clone.find('.end-date-picker').first().datepicker({
autoclose: true,
startDate: t
});
});
});
$('.remove-time-field').click(function() {
if ($('.multi-fields .multi-field').length > 1) {
$('.multi-fields .multi-field:last-child').remove();
}
});
每次添加新的 multi-field
div 时,将日期选择器添加到新添加的输入中。此外,在克隆元素时,您需要确保 IDs
是唯一的
我正在使用 Bootstrap 时间选择器 (https://github.com/eternicode/bootstrap-datepicker) 作为将动态生成的时间选择器输入字段。我能够创建字段,但无法将时间选择器对象附加到它们。
下面是部分工作代码:Code on JSFIDDLE
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.eventStartDate input').datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$(".eventEndDate input").datepicker({
autoclose: true,
startDate: t
});
});
这里正在工作fiddle
HTML:
<div class="row">
<div class="multi-field-wrapper">
<div class="multi-fields alldates">
<div class="multi-field" id="multi-field1">
<div class="form-group eventStartDate col-xs-3">
<label>Start Date</label>
<input type="text" class="form-control start-date-picker" placeholder="">
<span class="alert-message" data-alertid="startdate"></span>
</div>
<div class="form-group eventEndDate col-xs-3">
<label>End Date</label>
<input type="text" class="form-control end-date-picker" placeholder="">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<div class="form-group">
<label>Add more</label>
<span class="input-group-btn">
<button class="btn btn-default add-time-field" type="button">+</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default remove-time-field" type="button">-</button>
</span>
</div>
</div>
</div>
</div>
如您所见,我稍微调整了它的结构(从 multi-field
div 中删除了 add/remove 按钮)
JavaScript:
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('.start-date-picker').datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$(".end-date-picker").datepicker({
autoclose: true,
startDate: t
});
});
$(".add-time-field").click(function(e) {
var $div = $('div[id^="multi-field"]:last');
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
//Insure that id property is unique
var $clone = $div.clone().prop('id', 'multi-field'+num );
$('.alldates').append($clone);
var $startDate = $clone.find('.start-date-picker').first();
$startDate.val('');
var $endDate = $clone.find('.end-date-picker').first();
$endDate.val('');
$startDate.datepicker({
autoclose: true,
todayHighlight: true,
startDate: today
}).on('changeDate', function(e) {
var t = e.date;
$clone.find('.end-date-picker').first().datepicker({
autoclose: true,
startDate: t
});
});
});
$('.remove-time-field').click(function() {
if ($('.multi-fields .multi-field').length > 1) {
$('.multi-fields .multi-field:last-child').remove();
}
});
每次添加新的 multi-field
div 时,将日期选择器添加到新添加的输入中。此外,在克隆元素时,您需要确保 IDs
是唯一的