Javascript 在jQuery对话框中添加并初始化jQuery日期选择器
我在单击按钮时创建了一个jQuery对话框,并且datepicker文本框也在从另一个DIV克隆的对话框中创建,但是当我单击文本框时,datepicker不会按预期弹出Javascript 在jQuery对话框中添加并初始化jQuery日期选择器,javascript,jquery,html,jquery-ui,datepicker,Javascript,Jquery,Html,Jquery Ui,Datepicker,我在单击按钮时创建了一个jQuery对话框,并且datepicker文本框也在从另一个DIV克隆的对话框中创建,但是当我单击文本框时,datepicker不会按预期弹出 <div id='searchdialog'>blank div</div> <div id='search'> <input type='text' id='arrivDate' /> <input type='text' id='deparDate' /&
<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-将“search”的内容添加到此DIV,并将文本框ID更改为“arrivDate2”和“deparDate2”
单击按钮时,会触发函数setPopupForm并弹出对话框。但当我单击“arrivDate2”时,日期选择器不会打开。我试图在对话框中初始化选择器,但仍然不起作用
请帮我弄清楚这件事
这是我尝试的上面的JSFIDLE。
这是我正在研究的真实例子。我试图将FindHotel中的内容克隆到一个对话框中,并通过在移动中更改新的内容ID来创建另外两个日期选择器。
首先调用arrivDate的日期选择器,然后调用dialog的searchdialog
您可以尝试对输入应用模糊
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,
});
datepicker和对话框的相对z索引是什么?为了复制它,我们做了一些修改:。我注意到,如果我在输入字段外部单击,然后在内部单击,则会出现日期选择器。@Barmar,如果您添加$'arrivDate'.blur.focus;最后它默认打开,我想这是因为arrivDate默认有焦点。如果您可以将默认焦点设置为另一个字段,那么您的问题就可以得到解决。我已经更新了你的小提琴@sandeproop是的。默认情况下,对话框会这样做。
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,
});