随时随地在 jQuery Dialog 中添加和初始化 jQuery Datepicker答案

【问题标题】：Add and init jQuery Datepicker inside jQuery Dialog on the go随时随地在 jQuery Dialog 中添加和初始化 jQuery Datepicker
【发布时间】：2014-06-06 19:35:43
【问题描述】：

我在单击按钮时创建了一个 jQuery 对话框，并且日期选择器文本框也在从另一个 DIV 克隆的对话框中创建，但是当我单击文本框时，日期选择器没有按预期弹出。

<div id='searchdialog'>blank div</div>
<div id='search'>
    <input type='text' id='arrivDate' />
    <input type='text' id='deparDate' />
</div>
<button id="popup" onclick="setPopupForm()">Click</button>

function setPopupForm(){
    $('#searchdialog').html($('#search').html());
    $('#searchdialog').find('#arrivDate').attr('id','arrivDate2');
    $('#searchdialog').find('#deparDate').attr('id','deparDate2');

    $('#searchdialog').dialog({
        height: 280,
        width: 740,
        resizable: false,
        modal: true,
        draggable: true
    });

    $('#arrivDate2').datepicker({
        defaultDate: "+7",
        changeMonth: true,
        numberOfMonths: 1,
    });
}

搜索 - 已存在的 DIV

searchdialog - 将“搜索”的内容添加到此 DIV 并将文本框 ID 更改为“arrivDate2”和“deparDate2”

单击按钮时，会触发“setPopupForm()”函数并弹出对话框。但是当我单击“arrivDate2”时，日期选择器没有打开。我尝试在对话框中初始化选择器，但仍然无法正常工作。

请帮我解决这个问题。

这是我尝试过的上述 JSFIDDLE。 JSFIDDLE

这是我正在研究的真实示例。我试图将 Find Hotel 中的内容克隆到一个对话框中，并通过在旅途中更改新的内容 ID 来创建另外两个日期选择器。 EXAMPLE

【问题讨论】：

日期选择器和对话框的相对 z-index 是多少？
制作了一个小提琴来重现它：jsfiddle.net/barmar/2J4eQ。我注意到，如果我在输入字段外部单击然后在内部单击，则会出现日期选择器。
@Barmar 如果您在末尾添加$('#arrivDate').blur().focus();，它默认会自行打开
我认为这是因为“arrivDate”默认具有焦点。如果您可以将默认焦点设置到另一个字段，那么您的问题就可以解决。我已经更新了你的小提琴jsfiddle.net/2J4eQ/1
@Sandeeproop 是的。 dialog 默认情况下会这样做。

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

var content = "<div><input type='text' id='arrivDate' /></div>";
    $('#searchdialog').html(content);
    $('#arrivDate').datepicker({
        defaultDate: "+7",
        changeMonth: true,
        numberOfMonths: 1,
    });
    $('#searchdialog').dialog({height: 280, width: 740, resizable: false, modal: true, draggable: true});

首先调用 datepicker 获取 arrivDate 然后调用 searchdialog 获取对话框。

FIDDLE DEMO

【讨论】：

【解决方案2】：

您可以尝试简单地将blur 应用于输入

var content = "<span id='lala'></span><div><input type='text' id='arrivDate' /></div>";
$('#searchdialog').html(content).blur();
$('#searchdialog').dialog({
    height: 280,
    width: 740,
    resizable: false,
    modal: true,
    draggable: true
});
                /* Here it is */
                /****/
$('#arrivDate').blur().datepicker({
    defaultDate: "+7",
    changeMonth: true,
    numberOfMonths: 1,
});

UPDATED FIDDLE HERE

【讨论】：