여러 입력 필드에서 Jquery 날짜 선택 도구

Question

나는 날짜와 날짜가 여러 개인 입력 필드가있는 페이지가 있습니다. 동적 ID와 이름을 만들었습니다. jquery date picker를 사용했습니다.

코드 : 날짜 선택에 대한

<?php 
    $i=1; 
    foreach($locations as $location) 
    { 

?> 
<tr> 
<td><?php echo $location['name'];?></td> 
<td> 
<input type="text" name="txtFromDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtFromDate_<?php echo $i;?>"/> 
</td> 
    <td> 
<input type="text" name="txtToDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtToDate_<?php echo $i;?>"/> 
</td> 
<td> 
<input type="text" name="txtFromTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;" /> 
</td> 
<td> 
<input type="text" name="txtToTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;"/> 
    </td> 
    </tr> 
    <?php 
$i++; 
    } 
    ?> 

jQuery 코드는 :

(document).ready(function(){ 
     var count=0; 
     count=<?php echo count($locations);?>; 

     for(i=1;i<=count;i++) 
     { 
      var dates = $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({ 
      defaultDate: new Date(), 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(selectedDate) { 
       var option = this.id == "txtFromDate_"+i ? "maxDate" : "minDate"; 
       var instance = $(this).data("datepicker"); 
       var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
    }); 
     } 

JQuery와 날짜 선택은 FROMDATE과 날짜 필드에 표시됩니다. 위의 코드에서 나는 date to date 검증을 적용했다. 즉 date는 date보다 커야한다.

위 코드의 문제점은이 유효성 검사가 마지막 행에만 적용된다는 것입니다.

이 유효성 검사를 모든 행에 적용해야합니다.

Answer 1

루프를 반복 할 때마다 dates 변수가 다시 선언됩니다. 따라서 루프가 완료되면 onSelect 핸들러에서 사용중인 dates 변수가 루프에 설정된 마지막 항목과 같습니다.

업데이트이 코드를보십시오 :

갱신 2 한 가지 더 변수 i의 문제입니다. 그 현재 값은 루프 중에 사용 가능합니다. 나중에 onSelect 핸들러가 사용될 때, i는 마지막 반복과 같은 값을가집니다. 이를 극복하기 위해 다른 함수의 문맥에 i을 넣어야합니다. 그 이유는 내가 전달하는 다른 함수의 루프 본문에 코드를 넣었습니다. i 변수입니다.

업데이트 3 그리고 한 가지 더 - 옵션을 선택하는 논리 (minDate 또는 maxDate)를 취소해야했습니다.

$(document).ready(function(){ 
    var count=0; 
    count=<?php echo count($locations);?>; 

    for(i=1;i<=count;i++) 
    { 
     (function(i) { 
      $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({ 
       defaultDate: new Date(), 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'yy-mm-dd', 
       onSelect: function(selectedDate) { 
        var option, otherPicker; 
        if (this.id == "txtFromDate_"+i) { 
         otherPicker = $("#txtToDate_"+i); 
         option = "minDate"; 
        } else { 
         otherPicker = $("#txtFromDate_"+i); 
         option = "maxDate"; 
        } 
        var instance = $(this).data("datepicker"); 
        var date = $.datepicker.parseDate(instance.settings.dateFormat ||  $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
        otherPicker.datepicker("option", option, date); 
       } 
      }; 
     })(i); 
    } 
});