帶有克隆表單元素的jQuery日期選擇器範圍

Question

我有一個可以克隆的動態表單，但日期選擇器自定義範圍函數限制每個克隆的結束日期都來自第一個開始日期元素。

我正在使用SheepIt!插件克隆我的表單元素。

工作實施例：http://jsfiddle.net/YWdV7/15/

*注：添加/刪除功能在撥弄不工作，但是示例的時間範圍的限制，如前所述

爲第一日期字段和克隆功能初始功能：

當按下按鈕克隆

<script type="text/javascript"> 
$(document).ready(function() { 

    var container = $('#container').sheepIt(
    { 
      separator: '', 
      allowRemoveLast: true, 
      allowRemoveCurrent: false, 
      allowRemoveAll: false, 
      allowAdd: true, 
      allowAddN: false, 
      maxFormsCount: 10, 
      minFormsCount: 0, 
      iniFormsCount: 1 
     } 
     ); 
    }); 

    $(function() { 
     $(".date").datepicker({ 
      showOn: "both", 
      buttonImage: "../../media/icons/calendar.png",   
      changeMonth: true, 
      changeYear: true, 
      yearRange: '2011:2050', 
      beforeShow: customRange 
     }); 
    }); 

    function customRange(input) { 
     if ($(input).hasClass('end_date')) { 
      var minDate = new Date($('.start_date').val()); 
      minDate.setDate(minDate.getDate() + 1) 
      return { 
       minDate: minDate 
      }; 
     } 
    }; 
</script> 

功能重新啓動日期選擇器：

<script type="text/javascript"> 
$('#container_add').live('click', function() { 
    $('.date').datepicker({ 
     showOn: "both", 
     buttonImage: "../../media/icons/calendar.png",   
     changeMonth: true, 
     changeYear: true, 
     yearRange: '2011:2050', 
     beforeShow: customRange 
    }) 

    function customRange(input) { 
     if ($(input).hasClass('end_date')) { 
      var minDate = new Date($('.start_date').val()); 
      minDate.setDate(minDate.getDate() + 1) 
      return { 
       minDate: minDate 
      }; 
     } 
    }; 

}); 
</script> 

兩

Answer 1

你的代碼有幾件事情：

• $(function() {})相同$(document).ready(function() {})。
• customRange(input)只需要定義一次。如果多次定義，最新定義的將覆蓋以前的（就像重新分配變量一樣）。
• 在customRange(input)，你真的想得到相應的.start_date，而不是任何.start_date。所以，你應該使用$(input).prevAll('.start_date')而不是$('.start_date')。
• 要使代碼保持乾爽，您可以重複使用日期選擇器選項。

以下是一個示例：http://jsfiddle.net/william/YWdV7/18/。