jQueryで複数の開始日を確認する

Question

開始日と終了日の日付範囲を検証しました。

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

    }); 

このコードは正常に動作しています。しかし、別の開始日と終了日を動的に設定する必要があります。

この検証は、最初の終了日が2番目の開始日より短く、2番目の終了日が3番目の開始日より短いようです。

Answer 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); 

}）。

さらに詳しく調べるには、{https://jsfiddle.net/1oLtoum2/2/}}