JQuery DatePicker несколько экземпляров - PullRequest
Новая
       9

JQuery DatePicker несколько экземпляров

2 голосов
/ 07 июня 2009

Я сделал форму RequestForQuote, в которой я даю возможность добавлять новые позиции для получения RFQ.

В принципе, в моем случае это довольно просто сделать с помощью PHP. Работа действительно хорошо. Вы можете посмотреть. Его можно найти по адресу: мой сайт

Теперь я заразился вирусом jquery и просто хотел добавить интерфейс datepicker (для последней версии, которую я получил с их веб-страницы). 

<input type="text" size="10" id="deldate[] 
     class="datepicker" value="<?php echo $_REQUEST['deldate'][$k]; ?>" />

$ k из php for($k=0;$k<=$NoPos;$k++) loop

код JavaScript работает так: 

$(function() {
$('input').filter('.datepicker').datepicker({
        showOn: 'button', 
        buttonImage: 'calender/media/cal.gif', 
        buttonImageOnly: true,
        firstDay: 1,
        dateFormat: 'yy-mm-dd', 
        minDate: 0, maxDate: '+4Y'});

});

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

НО ...

если я добавлю еще одну позицию в форму, что делается с помощью PHP, поэтому я должен отправить форму для подсчета $ NoPos, ранее дата (даты) с инерцией будет потеряна, и у меня пустое поле ввода. 1020 *

теперь с onSubmit: function(dateText) Я могу получить выбранную дату. Однако мне не удается получить доступ к правильному полю ввода для ввода даты.

Так что мой вопрос прост: что я делаю не так? Если все в порядке, кто-то, пожалуйста, скажите, пожалуйста, как я могу решить эту проблему ..

У меня есть что-то вроде: 

for (var i=0;i<=NoPos;i++) {
    var tag = "#deldate"+i;
    $(tag).datepicker({ ... });
}

и использование php для <input type="text" size="10" id="lieferdat<?php echo $k; ?>" class="datepicker" />

Большое спасибо за ваше терпение, которое вы прочитали ...

и еще большое спасибо за любые подсказки

Ура Даниэль

Ответы [ 3 ]

3 голосов
/ 08 июля 2009

Я сам искал то же самое, и я думаю, что нашел трюк : $('input').filter('.datepickerclass').datepicker()
и на соответствующих элементах ввода:
class="datepickerclass"

я вижу выше, вы пробовали что-то подобное, но только следование рецепту (этой ссылки) сработало для меня.

1 голос
/ 07 июня 2009

Я не думаю, что проблема заключается в указателе даты. DatePicker просто используется для заполнения поля ввода с датой, он не должен иметь ничего общего с полями формы, которые отправляются на сервер. В любом случае, на странице фактически размещается только один элемент управления datepicker (div), независимо от того, сколько динамических DatePicker вы используете. Можете ли вы опубликовать соответствующий сгенерированный HTML-код для страницы?

Кстати, похоже (по крайней мере, в вашем примере кода) вы пропустили кавычку на идентификаторе. Если это в самом коде, это может быть причиной вашей проблемы.

РЕДАКТИРОВАТЬ : На основании вашего опубликованного примера (который действительно нужно было добавить к вашему вопросу, отредактировав его, а не добавив в качестве ответа), я вижу вашу проблему. Ваш вход не имеет имени параметра. Входные данные отправляются обратно, только если у них есть имя.

Изменить это: 

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       class="datepicker" />

к этому: 

<input type="text" size="10"
       id="lieferdat<?php echo $k; ?>"
       name="lieferdat<?php echo $k; ?>"
       class="datepicker" />
0 голосов
/ 17 июня 2013

Это может быть немного поздно, но все вышеизложенные предложения не сработали для меня, я нашел простое решение для этого.

Во-первых, что вызывает проблему: JQuery назначает указатель даты идентификатору элемента. если вы клонируете элемент, то такой же идентификатор может быть также клонирован. который jQuery не любит. Вы можете получить либо ошибку нулевой ссылки, либо дату, назначенную первому полю ввода, независимо от того, в каком поле ввода вы щелкнете.

Решение:

1) уничтожить DatePicker 2) назначить новые уникальные идентификаторы для всех полей ввода 3) назначить указатель даты для каждого ввода

Убедитесь, что ваш ввод примерно такой 

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

Прежде чем клонировать, уничтожьте сборщик дат 

$('.n1datepicker').datepicker('destroy');

После того, как вы клонируете, добавьте также эти строки 

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

и происходит волшебство

...