jQuery中多个从日期到日期的日期范围验证答案

【问题标题】：Daterange validation for multiple from-to dates in jQueryjQuery中多个从日期到日期的日期范围验证
【发布时间】：2017-09-07 09:07:36
【问题描述】：

我已经完成了开始日期和结束日期的日期范围验证。

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();
        });

    });

此代码运行正常。但我需要动态设置另一个开始日期和结束日期。

对此的验证就像第一个结束日期小于第二个开始日期，第二个结束日期小于第三个开始日期。

【问题讨论】：

标签： jquery date datetimepicker date-range

【解决方案1】：

** 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/}}

【讨论】：