jQueryUI对话框/日期选择器自动打开
我目前有一个对话框,其中有两个输入作为其内容(两个输入使用jQueryUI对话框/日期选择器自动打开,jquery,jquery-ui,dialog,datepicker,Jquery,Jquery Ui,Dialog,Datepicker,我目前有一个对话框,其中有两个输入作为其内容(两个输入使用.datepicker())。当我打开对话框时,第一个输入成为焦点,第一个日期选择器自动出现。我尝试过隐藏div并模糊输入,但这会导致日期选择器不再显示在焦点上 理想情况下,我希望能够做到以下几点: 打开对话框(不显示日期选择器) 单击第一个输入并显示日期选择器 这是我目前的代码: JAVASCRIPT: $("#to").datepicker({ onClose: function (selectedDate) {
.datepicker()
)。当我打开对话框时,第一个输入成为焦点,第一个日期选择器自动出现。我尝试过隐藏div并模糊输入,但这会导致日期选择器不再显示在焦点上
理想情况下,我希望能够做到以下几点:
- 打开对话框(不显示日期选择器)
- 单击第一个输入并显示日期选择器
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "minDate", selectedDate);
}
});
$("#from").datepicker({
onClose: function (selectedDate) {
$("#to").datepicker("option", "maxDate", selectedDate);
}
});
$("#settingsDialog").dialog({
autoOpen: false,
open: function (event, ui) {
if ($(".ui-datepicker").is(":visible"))
$(".ui-datepicker").hide();
$("#to").blur();
$this.focus().click();
},
close: function () {
$(this).dialog("close");
}
});
我还制作了一个JSFIDLE演示:
我在网上搜索了一个解决方案,并找到了类似的解决方案,但似乎没有任何帮助。有人能帮我吗
编辑:
我使用的浏览器是Chrome。您可以在打开对话框时创建日期选择器,如下所示:
$("#settingsDialog").dialog({
autoOpen: false,
open: function (event, ui) {
//if ($(".ui-datepicker").is(":visible"))
// $(".ui-datepicker").hide();
$("#to").blur();
},
close: function () {
$("#to").datepicker("destroy");
$("#from").datepicker("destroy");
$(this).dialog("close");
}
});
$("#b1").click(function(){
$("#settingsDialog").dialog("open");
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "minDate", selectedDate);
}
});
$("#from").datepicker({
onClose: function (selectedDate) {
$("#to").datepicker("option", "maxDate", selectedDate);
}
});
});
可以在对话框中粘贴虚拟输入,该对话框没有高度,因此不会被看到。将其置于日期选择器字段之前
<input style="height:0px; border:none"/>
演示:尝试将包含日期选择器的输入上的tabindex属性设置为-1
<input type="text" id="to" tabindex="-1" />
编辑:
演示:
还应在关闭时使用
destroy
,以防再次使用对话框,这仅适用于初始打开的对话框。如果您关闭并再次打开它,问题仍然存在。正如McCanff所说,在关闭时使用destroy for datepicker将解决此问题谢谢您的帮助!这是一种巧妙的方法!谢谢我还设置了“背景:透明”,因为表单有不同的颜色。这个解决方案有效,但在不可见的输入周围留下一个丑陋的选定框架,这会让人恼火。一旦你点击其他地方,它就会消失。+1-要使其工作,你需要将其应用于两个输入。不管怎样,很好的发现!这也是我的解决方案。这应该是公认的答案。
<input type="text" id="to" tabindex="-1" />
<input id="to" type="text" tabindex="-1" />
<input id="from" type="text" tabindex="-1" />