jQuery Datepicker 设置动态添加的 datepicker 的开始和结束日期答案

【问题标题】：jQuery Datepicker set start and end date of dynamically added datepickerjQuery Datepicker 设置动态添加的 datepicker 的开始和结束日期
【发布时间】：2013-02-06 23:15:17
【问题描述】：

我已经动态添加了 ID 为 TrainingPeriodStart[] 和 TrainingPeriodEnd[] 的日期选择器文本框。我需要针对每一对设置正确的开始和结束日期。

开始和结束日期的设置可在文档link here 中找到。

我想到了下面的代码，但它不起作用：

    var inputName = '';
    var number = '';

    $('input[id^="TrainingPeriodStart"]').click(function() {
        inputName = $(this).attr('id');
        number = inputName.substr(inputName.length - 3); // get [number]
    }).datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function( selected ) {
            $('#TrainingPeriodEnd'+number).datepicker( "option", "minDate", 
                selected )
        }
    });

    $('input[id^="TrainingPeriodEnd"]').click(function() {
        inputName = $(this).attr('id');
        number = inputName.substr(inputName.length - 3); // get [number]
    }).datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function( selected ) {
            $('#TrainingPeriodStart'+number).datepicker( "option", "maxDate", 
                selected )
        }
    });

基本上，我想用 [number] 属性来定位日期选择器对，并设置它们的最小和最大日期以限制用户选择非法日期范围。

我该如何解决这个问题？

【问题讨论】：

为我工作：jsfiddle.net/mccannf/SCXMD/2。你是什么意思“不工作？”。
@mccannf：非常感谢您的确认。我实际上为这些日期选择器对使用了一个克隆脚本，例如stackoverflow.com/a/4400887/1685185。日期选择器有效，但不是实际的开始/结束事件:(克隆这些会影响吗？

标签： jquery jquery-ui datepicker

【解决方案1】：

如果您克隆元素，则需要向克隆的元素添加新的点击事件，以便触发事件：

$(function() {
    var inputName = '';
    var number = '';

    var template = $('#training .trainingperiod:first').clone(),
        trainingPeriodCount = 1;

    var addTrainingPeriod = function(){
        trainingPeriodCount++;
        var trainingPeriod = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + trainingPeriodCount;
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .trainingperiod
        .attr('id', 'TrainingPeriod' + trainingPeriodCount) // update attendee id
        .prependTo('#training'); // add to container

        $('#TrainingPeriod' + trainingPeriodCount).find('input[id^="TrainingPeriodStart"]').datepicker({
            changeYear: true,
            changeMonth: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function( selected ) {
                var thisInput = $(this).attr('id');
                var thisNumber = thisInput.substr(thisInput.length - 3);
                $('#TrainingPeriodEnd'+thisNumber).datepicker( "option", "minDate", 
                    selected )
            }
        });
        $('#TrainingPeriod' + trainingPeriodCount).find('input[id^="TrainingPeriodEnd"]').datepicker({
            changeYear: true,
            changeMonth: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function( selected ) {
                var thisInput = $(this).attr('id');
                var thisNumber = thisInput.substr(thisInput.length - 3);
                $('#TrainingPeriodStart'+thisNumber).datepicker( "option", "maxDate", 
                    selected )
            }
        });        
    };

    $('.add').click(addTrainingPeriod); // attach event

    $('input[id^="TrainingPeriodStart"]').click(function() {
        inputName = $(this).attr('id');
        number = inputName.substr(inputName.length - 3); // get [number]
    }).datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function( selected ) {
            $('#TrainingPeriodEnd'+number).datepicker( "option", "minDate", 
                selected )
        }
    });

    $('input[id^="TrainingPeriodEnd"]').click(function() {
        inputName = $(this).attr('id');
        number = inputName.substr(inputName.length - 3); // get [number]
    }).datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: 'yy-mm-dd',
        onSelect: function( selected ) {
            $('#TrainingPeriodStart'+number).datepicker( "option", "maxDate", 
                selected )
        }
    });
});

Fiddle is here.

【讨论】：