jquery 日期选择器在模态对话框中自动显示

Question

刚刚在我的模式对话框中使用了日期选择器，我第一次打开它时它没有自动打开（这是预期的）。如果我关闭对话框然后在下次自动出现时打开它（我绝对不想要）。

$(function () {

$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd'
});

$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});
$("#opener").click(function () {
    $("#dialog").dialog("open");
});

});

这是Fiddle Example

到目前为止所有的努力都没有奏效，我目前尝试的包括：

• 在 .open 事件中将焦点设置到其他地方
• 为模态中的其他控件添加自动对焦属性
• 为日期选择器设置默认值（硬编码）

任何提示或帮助都会很棒？甚至可能在 jquery 文档上找不到任何东西。

Answer 1

关于我的体验，有几点需要注意每个日期选择器（我在表单上有多个）必须有不同的 class- 属性名称。

在包含日期选择器的部分视图中，我讨厌以下内容javascript：

$(function () {
    $(".meetingDate1").datepicker({ dateFormat: "dd/mm/yy" });
    $(".meetingDate2").datepicker({ dateFormat: "dd/mm/yy" });
});

然后在打开模式的主页和 returns 部分视图中，我有以下内容：

 $(".booking").click(function () {
    $(".meetingDate1").datepicker("disable");
    $(".meetingDate2").datepicker("disable");
    $("#bookingForm").dialog({
        position: { my: "center", at: "top", of: window },
        resizable: false,
        title: 'Modal Title Here',
        modal: true,
        width: 990,
        open: function (event, ui) {
            // load the partial view containing form controls
            $(this).load('@Url.Action("Create", "Booking")');
            $(".meetingDate1").datepicker("enable");
            $(".meetingDate2").datepicker("enable");
        },
        buttons: {
            "Book Meeting": function () {
                 // call controller method with bookedmeeting storedproc
             },
             Cancel: function () {
                 $(this).dialog("close");
             }
         }
    });
});

所以再次强调，我在 'click' 事件中禁用了日期选择器，然后在 'open' 事件中启用它。感谢 的帮助。