我目前有一个对话框,其中有两个输入作为其内容(两个输入使用.datepicker()
)。当我打开对话框时,第一个输入成为焦点,第一个日期选择器自动出现。我试图隐藏div并模糊输入,但这会导致日期选择器不再出现在焦点上。
理想情况下,我希望能够做到以下几点:
这是我目前的代码:
JAVASCRIPT:
$("#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");
}
});
我还制作了一个jsfiddle演示:http://jsfiddle.net/ARnee/19/
我在网上搜索了一个解决方案,发现了类似的questions,但似乎没有任何帮助。任何人都可以帮助我吗?!
编辑:
我使用的浏览器是Chrome。
答案 0 :(得分:15)
尝试将包含datepicker的输入上的 tabindex 属性设置为-1。
<input type="text" id="to" tabindex="-1" />
<强> 编辑: 强>
<input id="to" type="text" tabindex="-1" />
<input id="from" type="text" tabindex="-1" />
答案 1 :(得分:7)
可以在没有高度的对话框中粘贴虚拟输入,因此不会被看到。将它放在datepicker字段之前
<input style="height:0px; border:none"/>
答案 2 :(得分:1)
您可以在打开对话框时创建日期选择器,如下所示:
$("#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);
}
});
});
答案 3 :(得分:0)
$(document).ready(function(){
$("#settingsDialog").dialog({
autoOpen: false,
open: function (event, ui) {
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "minDate", selectedDate);
}
});
$("#from").datepicker({
onClose: function (selectedDate) { $("#to").datepicker("option", "maxDate", selectedDate);
}
});
if ($(".ui-datepicker").is(":visible"))
$(".ui-datepicker").hide();
$("#to").blur();
$this.focus().click();
},
close: function () {
$("#to").datepicker( "destroy" );
$("#from").datepicker( "destroy" );
$(this).dialog("close");
}
});
$("#b1").click(function(){
$("#settingsDialog").dialog("open");
});
});