Блог

У меня есть динамическая форма, которую можно клонировать, но пользовательская функция выбора диапазона ограничивает конечную дату каждого клона первым элементом даты начала.

Я использую SheepIt! плагин для клонирования моих элементов формы.

Рабочий пример:http://jsfiddle.net/YWdV7/15 /

* Примечание: добавление / удаление функций, не работающих в fiddle, но пример ограничения диапазона дат, как описано ранее

Начальная функция для первых полей даты и функция клонирования:

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

Несколько вещей о вашем коде:

• $(function() {}) такой же, как $(document).ready(function() {}) .
• customRange(input) требуется определить только один раз. Если он определен несколько раз, последний определенный переопределит предыдущие (точно так же, как переназначение переменной).
• В customRange(input) вы действительно хотите получить соответствующий, .start_date а не просто любой .start_date . Итак, вам следует использовать $(input).prevAll('.start_date') вместо $('.start_date') .
• Чтобы сохранить код СУХИМ, вы можете повторно использовать параметры выбора даты.

Вот пример:http://jsfiddle.net/william/YWdV7/18 /.