jQuery 中多个从到日期的日期范围验证
Daterange validation for multiple from-to dates in jQuery
我已经完成了开始日期和结束日期的日期范围验证。
html
<label for="startdate" class="control-label">StartDate</label>
<input type="text" id="startdate" class="form-control" />
<label for="enddate">EndDate</label>
<input type="text" id="enddate" class="form-control" />
jquery
$(function () {
$('#startdate,#enddate').datetimepicker({
useCurrent: false,
minDate: moment()
});
$('#startdate').datetimepicker().on('dp.change', function (e) {
var incrementDay = moment(new Date(e.date));
incrementDay.add(1, 'days');
$('#enddate').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('#enddate').datetimepicker().on('dp.change', function (e) {
var decrementDay = moment(new Date(e.date));
decrementDay.subtract(1, 'days');
$('#startdate').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
});
此代码运行正常。但是我需要动态设置另一个开始日期和结束日期。
对此的验证类似于第一个结束日期小于第二个开始日期,第二个结束日期小于第三个开始日期。
** html **
<div class="multi-field">
<div class="form-group m-l-0 m-r-0 col-md-4">
<label>Start Date </label>
<div class='input-group date' id='startdate'>
<input type='text' class="form-control" name='startdate_1' id='startdate_1' placeholder='Start Date' value=""/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</span> </div>
</div>
<div class="form-group m-l-0 m-r-0 col-md-4">
<label>End Date </label>
<div class='input-group date' id='priceend'>
<input type='text' class="form-control" name='priceend_1' id='priceend_1' placeholder='End Date' value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group m-l-0 m-r-0 col-md-3">
<button type="button" class="add_field_button btn btn-info " id="add-field">Add Price</button>
</div>
** jquery **
$( document ).ready(function() {
var counter = 1;
$('#startdate_1,#priceend_1').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false
});
$('#startdate_1').datetimepicker().on('dp.change', function (e) {
var incrementDay = moment(new Date(e.date));
incrementDay.add(1, 'days');
$('#priceend_1').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('#priceend_1').datetimepicker().on('dp.change', function (e) {
var decrementDay = moment(new Date(e.date));
decrementDay.subtract(1, 'days');
$('#startdate_1').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
var incre=2;
$('#add-field').click(function(){
counter += 1;
incre += 1;
//alert(counter)
$('.multi-field').append('<div class="form-group m-l-0 m-r-0 col-md-4"><label>Start Date </label><div class="input-group date" id="startdate"><input type="text" class="form-control" name="startdate_' + counter + '" id="startdate_' + counter + '" placeholder="Check-in date" value=""/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><div class="form-group m-l-0 m-r-0 col-md-4"><label>End Date </label><div class="input-group date" id="priceend"><input type="text" class="form-control" name="priceend_' + counter + '" id="priceend_' + counter + '" placeholder="priceend" value="" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><br/>' );
$('#startdate_'+counter +',#priceend_'+counter).datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false
});
var newdec= counter;
newdec -=1;
var decrementDay1 = $('#priceend_'+newdec).val();
var decrementDay1 = moment(new Date(decrementDay1));
decrementDay1.add(1, 'days');
$('#startdate_'+counter).data('DateTimePicker').minDate(decrementDay1);
$('#startdate_'+counter).datetimepicker().on('dp.change', function (e) {
var decrementDay1 = $('#startdate_'+counter).val();
var decrementDay1 = moment(new Date(decrementDay1));
decrementDay1.add(1, 'days');
$('#priceend_'+counter).data('DateTimePicker').minDate(decrementDay1);
});
$("#count_c").val(counter);
});
$("#count_c").val(counter);
});
请参考此 js fiddle 进一步说明,
{{https://jsfiddle.net/1oLtoum2/2/}}
我已经完成了开始日期和结束日期的日期范围验证。
html
<label for="startdate" class="control-label">StartDate</label>
<input type="text" id="startdate" class="form-control" />
<label for="enddate">EndDate</label>
<input type="text" id="enddate" class="form-control" />
jquery
$(function () {
$('#startdate,#enddate').datetimepicker({
useCurrent: false,
minDate: moment()
});
$('#startdate').datetimepicker().on('dp.change', function (e) {
var incrementDay = moment(new Date(e.date));
incrementDay.add(1, 'days');
$('#enddate').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('#enddate').datetimepicker().on('dp.change', function (e) {
var decrementDay = moment(new Date(e.date));
decrementDay.subtract(1, 'days');
$('#startdate').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
});
此代码运行正常。但是我需要动态设置另一个开始日期和结束日期。
对此的验证类似于第一个结束日期小于第二个开始日期,第二个结束日期小于第三个开始日期。
** html **
<div class="multi-field">
<div class="form-group m-l-0 m-r-0 col-md-4">
<label>Start Date </label>
<div class='input-group date' id='startdate'>
<input type='text' class="form-control" name='startdate_1' id='startdate_1' placeholder='Start Date' value=""/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</span> </div>
</div>
<div class="form-group m-l-0 m-r-0 col-md-4">
<label>End Date </label>
<div class='input-group date' id='priceend'>
<input type='text' class="form-control" name='priceend_1' id='priceend_1' placeholder='End Date' value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group m-l-0 m-r-0 col-md-3">
<button type="button" class="add_field_button btn btn-info " id="add-field">Add Price</button>
</div>
** jquery **
$( document ).ready(function() {
var counter = 1;
$('#startdate_1,#priceend_1').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false
});
$('#startdate_1').datetimepicker().on('dp.change', function (e) {
var incrementDay = moment(new Date(e.date));
incrementDay.add(1, 'days');
$('#priceend_1').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('#priceend_1').datetimepicker().on('dp.change', function (e) {
var decrementDay = moment(new Date(e.date));
decrementDay.subtract(1, 'days');
$('#startdate_1').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
var incre=2;
$('#add-field').click(function(){
counter += 1;
incre += 1;
//alert(counter)
$('.multi-field').append('<div class="form-group m-l-0 m-r-0 col-md-4"><label>Start Date </label><div class="input-group date" id="startdate"><input type="text" class="form-control" name="startdate_' + counter + '" id="startdate_' + counter + '" placeholder="Check-in date" value=""/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><div class="form-group m-l-0 m-r-0 col-md-4"><label>End Date </label><div class="input-group date" id="priceend"><input type="text" class="form-control" name="priceend_' + counter + '" id="priceend_' + counter + '" placeholder="priceend" value="" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><br/>' );
$('#startdate_'+counter +',#priceend_'+counter).datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false
});
var newdec= counter;
newdec -=1;
var decrementDay1 = $('#priceend_'+newdec).val();
var decrementDay1 = moment(new Date(decrementDay1));
decrementDay1.add(1, 'days');
$('#startdate_'+counter).data('DateTimePicker').minDate(decrementDay1);
$('#startdate_'+counter).datetimepicker().on('dp.change', function (e) {
var decrementDay1 = $('#startdate_'+counter).val();
var decrementDay1 = moment(new Date(decrementDay1));
decrementDay1.add(1, 'days');
$('#priceend_'+counter).data('DateTimePicker').minDate(decrementDay1);
});
$("#count_c").val(counter);
});
$("#count_c").val(counter);
});
请参考此 js fiddle 进一步说明, {{https://jsfiddle.net/1oLtoum2/2/}}