使用jquery更新动态隐藏的日期字段，以便显示的字段可以显示用户友好的日期

Question

我的表单中有一个日期输入字段，日期格式为YYYY-MM-DD，但我想通过动态创建另一个链接到该输入字段的输入字段来隐藏它，并将jquery-tools datepicker附加到附加字段。

这将意味着用户将看到一个使用jquery-tools datepicker的普通输入字段。当用户在datepicker中选择一个日期时，它会在可视区域中显示为"Fri，30 Mar 2012“，但也会将实际隐藏字段更新为"2012-03-30”。

我设法用下面的代码让它工作起来：

$(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()));
  }
});

我的问题在于，这些日期输入字段可以通过单击按钮来动态添加，从而允许用户向表单添加更多事件。这适用于任何在页面加载时加载的页面，但不适用于动态添加的页面。

希望这一切都是有意义的，抱歉，但我没有真正的例子来展示它。

Answer 1

有几种可能的方法：

1. 使用命名函数

- Within the `$(document).ready(...)` closure, split out the anonymous `$('.date-field').each()` function as a named function.
- Whenever a new `.date-field` is added, call the named function to attach datepicker functionality, including hidden field handling.

​

创建一个field/dateField类型的

- Create a container (typically a div or span) with `id="dateFieldPrototype"`.
- Populate the container with a hidden `field` and its corresponding `dateField`. These can be hard-coded HTML or dynamically generated. 
- Hide the prototype.
- Add dateInput functionality to the prototype `dateField`, including the 'beforeChange' handler.
- Amend the 'beforeChange' handler to discover its hidden field rather than relying on a reference to it in the closure.
- Generate all original and subsequently added datepickers by cloning the original.

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

只要稍加努力，这些方法中的任何一种都可以实现。

Answer 2

首先，您的beforeChange将仅绑定到现有的DOM元素。它不会绑定到动态添加的元素。为此，请使用.on('beforeChange', function(){}) (仅限jQuery 1.7+)。如果您使用的是旧版本的jquery，请改用.live。

其次，有一种更好的方法来创建隐藏的日期字段。从jQuery UI日期选择器中查看this page。