Динамический код выбора даты JQuery - PullRequest
5 голосов
/ 02 марта 2010

Мне нужно создать динамический фильтр, который добавляет / удаляет строки динамически.

Содержит раскрывающийся список. В зависимости от выбранного значения раскрывающегося списка, я создаю динамический <TD>, который может иметь текстовое поле или раскрывающийся список.

Если это текстовое поле, я должен добавить указатель даты для этого текстового поля.

Я сделал это, за исключением выбора даты для динамически генерируемого текстового поля.
Если вы создаете 100 строк, имена текстовых полей должны быть одинаковыми для всех строк.

Как добавить средство выбора даты для динамически генерируемого текстового поля?

Ответы [ 7 ]

16 голосов
/ 22 июля 2011

У меня была такая же проблема. Вам нужно будет привязать DatePicker к динамически добавляемой строке. Средство выбора даты связывает класс hadDatePicker с динамической строкой.

Так что вам нужно удалить это и заново связать.

Как то так -

    jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
    dateFormat: 'mm-dd-yy'
    });

С уважением, Тина Агравал

3 голосов
/ 04 января 2012

На самом деле я использовал решение, предоставленное @Tina Agrawal. Но с тех пор, когда я выбираю дату в календаре, я снова нажимаю и выбираю заново. Если я нажму на следующий месяц, он перейдет к 1900-01-01.

Ну, это было так странно ...

После двух часов проб и ошибок и исследований.

Я просто сделал:

$('.date-pick').live('click', function(){
 $('.date-pick').datepicker();
});

Ну, это работает.

2 голосов
/ 20 апреля 2013

У меня была такая же проблема, и я решил ее по-другому. Хотя я не совсем уверен, почему это работает, потому что я новичок в jquery. Я написал следующее, и он перебирает весь набор элементов управления, имеющих класс «class_date», и привязывает к нему элемент управления datepicker.

$(".class_date").removeClass('hasDatepicker').datepicker();
1 голос
/ 19 июля 2012

У меня была похожая проблема в том, что при динамическом добавлении новых строк в мою таблицу поля Date Picker в новых строках (любая строка, добавленная в DOM динамически) обновляли мои исходные поля Date Picker.

Удаление класса hasDatepicker, как было предложено выше, было недостаточно для решения моей проблемы, вероятно, поскольку я использовал .clone () для создания динамически добавляемых строк.

Решение при клонировании строк состояло в том, чтобы удалить клонированные поля ввода, воссоздать их, добавить их в мою вновь клонированную строку таблицы и затем повторно запустить средство выбора даты

Например:

//Remove exisiting cloned input fields
new_row.find("td.date input").remove();

//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);

//Re-initiate datepicker on the input fields                    
new_row.find("td.date input").datepicker({
    dateFormat:"dd-mm-yy",
    minDate:StartDate,
    maxDate:EndDate
});
1 голос
/ 02 марта 2010

Сначала добавьте атрибут класса как «дата» к вашему входу или разделу.

После динамического добавления текстового ввода необходимо снова вызвать $('.date').datePicker(), чтобы связать datePicker с новыми входами или делением.

0 голосов
/ 13 февраля 2013

нужно использовать ".on" вместо live - смотрите http://api.jquery.com/on/

0 голосов
/ 02 марта 2010

Используйте JQuery Live для доступа к динамически создаваемому DOM.

http://api.jquery.com/live/

Вы можете прикрепить подборщик.

http://jqueryui.com/demos/datepicker/

...