Question

我有一个可以克隆的动态表单，但是Datepicker自定义范围功能会限制每个克隆的结束日期与第一个开始日期元素的对比。

我使用SheepIt!插件来克隆表单元素。

*注意：添加/删除功能不适用于小提琴，但是如前所述的日期范围限制示例

第一个日期字段和克隆功能的初始函数：

<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>

按下克隆按钮时重新启动datepicker的功能：

<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')。
要保持代码DRY，您可以重复使用datepicker选项。

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

带有克隆表单元素的jQuery Datepicker范围

1 个答案: