带有嵌套表单的jQuery UI日期选择器

我已经看过了，但这并没有解决我的问题，但情况是一样的。jQuery加载得很好

这是我的“嵌套表单”：

<%= f.fields_for :events do |event_form| %>
<%= event_form.text_field :name %>
<%= event_form.text_field :date, :class => 'event_date' %>
<%= event_form.text_field :email %>
<%= event_form.text_field :place %>
<%= event_form.link_to_remove "Remove Event", :class => "remove_task" %>
<% end %>

最后是生成的html。您可以看到jQuery UI为DatePicker添加了它的类（hasDatepicker）：

<input class="event_date hasDatepicker" id="group_events_attributes_new_1317162040750_date" name="group[events_attributes][new_1317162040750][date]" size="30" type="text" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; ">

---

任何帮助都将不胜感激。谢谢

首先，您可以编写以下代码来显示从一开始呈现的日期选择器字段：

$(function() {
    $('.event_date').datepicker();
});

但是对于嵌套表单通过javascript创建的字段，您必须在添加字段（）后拦截

form

元素触发的

nested:fieldAdded

事件。您可以通过以下方式完成此任务：

$(function() {
    $('form').live('nested:fieldAdded', function(event) {
        $(event.field).find('.event_date').removeClass('hasDatepicker').datepicker();
    });
});

---

请注意

removeClass（'hasDatepicker'）

：如果没有它，由javascript创建的日期选择器字段将无法正确初始化。

我现在正在表单中执行相同的操作。下面是我使用jQuery1.7的示例

(function ($) {
    var app = {}, opts = { dateFormat: 'yy-mm-dd' }, dateSelector = 'input.event_date:visible';
    app.init = function(){
        $(window).on('nested:fieldAdded', onFieldAdded);
        $(dateSelector).datepicker(opts);
    };
    function onFieldAdded(e) {
        e.field.find(dateSelector).datepicker(opts);
    }
    $(app.init);
    return app;
} (jQuery));

对于较旧版本的jQuery，可以在init函数中使用以下内容

$(window).bind('nested:fieldAdded', onFieldAdded);

---

我所做的更好的是，重复次数更少（选择器的字符串），并且我不会对隐藏的元素调用datepicker，因此不需要对通过嵌套表单添加的元素调用removeClass（“hasDatepicker”）。

谢谢。。。但我还是不能让它工作，它从来都不工作？还是仅通过js添加字段？是否确实正确加载了jquery和ui？您可以将onload选择器更改为使用可见选择器$（'.event_date:visible'）。datepicker（）而不是删除该类；这样，您的隐藏元素就不会得到hasDatepicker类。

$(window).bind('nested:fieldAdded', onFieldAdded);