Диапазон jQuery Datepicker с клонированными элементами формы - PullRequest
Новая
       26

Диапазон jQuery Datepicker с клонированными элементами формы

0 голосов
/ 12 ноября 2011

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

Я использую плагин 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>

1 Ответ

1 голос
/ 13 ноября 2011

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

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

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

...