Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Jquery datepicker несколько экземпляров

Автор вопроса: DanielОтветов: 3

Я сделал форму 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++)

работа с кодом 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, ранее вставленные даты будут потеряны, и у меня будет пустое поле ввода.

теперь с помощью 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" />

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

и многое другое спасибо за любые подсказки

Ура Даниэль

inputdatepickerjqueryfield

Ответы

Ответ 1 · рейтинг 3 · Ingvald

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

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

Ответ 2 · рейтинг 1 · tvanfosson

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

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

EDIT: на основании вашего опубликованного примера (который действительно должен был быть добавлен к вашему вопросу путем его редактирования, а не добавления в качестве ответа на него), я вижу вашу проблему. Ваш ввод не имеет параметра имени. Входные данные отправляются обратно только в том случае, если у них есть имя.

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

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

Ответ 3 · EGN

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

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

Решение:

1) уничтожить средство выбора даты 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++;
});

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы