Используйте jquery для обновления динамического скрытого поля даты, чтобы отображаемое поле могло показывать удобную для пользователя дату

Question

У меня есть поле ввода даты в моей форме, и формат даты - ГГГГ-ММ-ДД, но я хочу скрыть это, динамически создавая другое поле ввода, связанное с этим, с помощью инструмента выбора даты jquery-tools, присоединенного к дополнительному полю.

Это будет означать, что пользователю будет представлено нормально выглядящее поле ввода, в котором используется инструмент выбора даты jquery-tools.Когда пользователь выбирает дату в средстве выбора даты, он отображает ее в визуальном поле как «Пт, 30 марта 2012», но также обновляет фактическое [скрытое] поле на «2012-03-30».

Iудалось заставить это работать, используя следующий код:

$(document).ready(function() {
  $.tools.dateinput.conf.format = 'ddd, d mmmm yyyy';

  $('.date-field').each(function(i, el) {
    var field = $(el);
    var dateParts = field.val().split('-');
    var d = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2]));
    var initDate = (isValidDate(d)) ? d : '';
    var dateField = $("<input type='text' class='injected-date-field'>").dateinput({ value: initDate} );

    $("#occurrences").delegate(".injected-date-field", "focusin", function(){
       $(this).dateinput();
    });

    // Without this, the field is initially blank
    if (initDate !== '') {
      dateField.val(dateField.data().dateinput.getValue($.tools.dateinput.conf.format));
    }

    dateField.bind('beforeChange', function(event, date) {
      // build date string, eg 2012-03-15
      year  = date.getFullYear().toString();
      month = (date.getMonth() + 1).toString();
      if (month.length == 1) { month = '0' + month; }
      day   = date.getDate().toString();
      if (day.length == 1) { day = '0' + day; }

      field.val(year + '-' + month + '-' + day);
    });
    field.before(dateField);
    field.hide();
  });

  function isValidDate(d) {
    return (Object.prototype.toString.call(d) === "[object Date]" && !isNaN(d.getTime()));
  }
});

Моя проблема заключается в том, что эти поля ввода даты можно динамически добавлять, нажимая кнопку, чтобы позволить пользователю добавлять больше вхождений в форму.Появляется новое поле, и оно создает поле инжектированной даты, к которому прикреплен инструмент выбора даты jquery-tools .... пока все хорошо ... но beforeChange в поле введенной даты не прикрепляется кВновь созданные поля правильно, поэтому при выборе даты из этого средства выбора даты оно не обновляет фактическое [скрытое] поле.Это работает для всех, которые загружаются при загрузке страницы, но не для динамически добавляемых.

Надеюсь, что все это имеет смысл, извините, но у меня нет действительно примера, чтобы показать это.

Answer 1

Существует несколько возможных подходов:

1. Использование именованной функции

   • В замыкании $(document).ready(...) выделите анонимную функцию $('.date-field').each()как именованная функция.
   • Всякий раз, когда добавляется новый .date-field, вызывайте названную функцию, чтобы присоединить функцию выбора даты, включая скрытую обработку полей.

2. Создатьполе ptototype / dateField

   • Создайте контейнер (обычно это div или span) с помощью id="dateFieldPrototype".
   • Заполните контейнер скрытым field и соответствующим dateField,Это может быть жестко закодированный HTML или динамически сгенерированный.
   • Скрыть прототип.
   • Добавить функцию dateInput к прототипу dateField, включая обработчик beforeChange.
   • Исправить обработчик beforeChange, чтобы обнаружить его скрытое полевместо того, чтобы ссылаться на него в закрытии.
   • Создайте все оригинальные и последующие добавленные датчики путем клонирования оригинала.

   $("#dateFieldPrototype").clone(true,true).appendTo(selector).show();

Приложив немного усилий, можно использовать любой из этих подходов.

Answer 2

Например, ваш beforeChange будет привязан только к существующим элементам DOM. Он не будет привязан к элементам, добавляемым динамически. Для этого используйте .on('beforeChange', function(){}) (только jQuery 1.7+). Если вы используете более старую версию jquery, используйте .live.

Во-вторых, есть лучший способ создания скрытых полей даты. Проверьте эту страницу из средства выбора даты jQuery UI.