jQuery 日期选择器自动打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9749895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Date Picker automatically opens
提问by Manse
I have a javascript code using which I want to accomplish the following . I want when i click on the button a form to appear but datepicker's date choosing option not to appear automatically (but in my case it opens up) . So in other words I wand disable that autoopen . Here is the script
我有一个 javascript 代码，我想使用它来完成以下操作。我希望当我单击按钮时会出现一个表单，但 datepicker 的日期选择选项不会自动出现（但在我的情况下它会打开）。所以换句话说，我想禁用那个 autoopen 。这是脚本
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function () {
var dates2 = $("#datePicker3,#datePicker4").datepicker({
autoOpen: false,
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
var option = this.id == "datePicker3" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates2.not(this).datepicker("option", option, date);
calculate_total_price();
}
}); ///
$("#order-popup").dialog();
$("#order-popup").show();
});
});
</script>
<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
<input type="text" id="datePicker3" name="datepickerFrom" value="">
<br/>
<input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
</form>
</div>
</body>
回答by Manse
The reason the datepickershows immediately is because the inputthe datapickeris loaded on has focusby default .. see here- this is because its the first inputon a form .... if you add another inputbefore the first its fine - > http://jsfiddle.net/JXtBM/1/
究其原因，datepicker立即显示是因为input在datapicker被加载上具有focus默认..在这里看到的-这是因为它的第一个input窗体上....如果添加另一个input第一以其优良的前- > HTTP：//的jsfiddle。净/JXtBM/1/
One way around this problem would be to use a button to trigger the opening of the datepicker :
解决此问题的一种方法是使用按钮触发日期选择器的打开：
showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
回答by Miguel Ribeiro
If you don't want the focus on the datepicker, you can just put another input before them and make it "invisible"
如果您不想将焦点放在日期选择器上，您可以在它们之前放置另一个输入并使其“不可见”
<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
<input style="height:0px; top:-1000px; position:absolute" type="text" value="">
<input type="text" id="datePicker3" name="datepickerFrom" value="">
<br/>
<input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
</form>
</div>?
In this case the input has height 0px, and is out of the screen, so it won't show up. Keep in mind that dates should be always picked, allowing the user to write is a risk because of date formats, separators, etc...
在这种情况下，输入的高度为 0px，并且在屏幕之外，因此不会显示。请记住，应该始终选择日期，由于日期格式、分隔符等原因，允许用户写入是一种风险......
回答by Anthony
As ManseUK said, it's because the dialog method automatically selects the first "tabbable" element within the parent element. It is hard coded to do this, as shown in another question.
正如 ManseUK 所说，这是因为 dialog 方法会自动选择父元素中的第一个“可选项卡”元素。这样做是硬编码的，如另一个问题所示。
One workaround (that I think looks weird, but works), would be to set a tab index to another element above the inputs, like so:
一种解决方法（我认为看起来很奇怪，但有效）是将选项卡索引设置为输入上方的另一个元素，如下所示：
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
<p tabindex="1">Choose Dates:</p>
<input type="text" id="datePicker3" name="datepickerFrom" value="" />
<input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px" />
</div>
回答by Ganesh Bora
set a tab index to another element help to reslove the issue as like below:
将标签索引设置为另一个元素有助于解决问题，如下所示：
**<label tabindex="1">From Date:</label>**
<input type="text" name="from_date" id="from_date" readonly="readonly" class="hasDatepicker">
<label>To Date</label>
<input type="text" name="to_date" id="to_date" readonly="readonly" class="hasDatepicker">
回答by Robin
Triggering 'blur' after creation solves the problem for me. I see this as a workarround, but it does the job.
创建后触发“模糊”为我解决了问题。我认为这是一种解决方法，但它可以完成工作。
I dont want to add a button to open the calender nor adding extra inputs to my document.
我不想添加一个按钮来打开日历，也不想向我的文档添加额外的输入。
$('[data-datepicker="datepicker"]').datepicker().trigger('blur');
回答by Miguel Ribeiro
Try putting the datepicker initialization in the document ready callback, like this:
尝试将 datepicker 初始化放在文档就绪回调中，如下所示：
$(document).ready(function(){
var dates2 = $( "#datePicker3,#datePicker4" ).datepicker({
autoOpen:false,
minDate:0,
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "datePicker3" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates2.not( this ).datepicker( "option", option, date );
calculate_total_price();
}
});
});
and the click function only contains:
并且点击功能只包含：
$("#order-popup").dialog();
$("#order-popup").show();
I'm not 100% sure this will work but at least is the correct way to do the initialization (if you already have it on the page, initialize on ready)
我不是 100% 确定这会起作用，但至少是进行初始化的正确方法（如果页面上已经有了它，请在准备好时进行初始化）
回答by Kevbo
Best option is to set the "autofocus" attribute on another element. When jquery opens the dialog it will look for the element with the autofocus attribute and set the focus to it. If none is found then focus is set to the first visible element.<input type="text" id="txtDescription" autofocus />
最好的选择是在另一个元素上设置“自动对焦”属性。当 jquery 打开对话框时，它将查找具有 autofocus 属性的元素并将焦点设置在它上面。如果没有找到，则将焦点设置为第一个可见元素。<input type="text" id="txtDescription" autofocus />
回答by Rami Muurim?ki
I solved this, by adding this as a first field in my form.
我解决了这个问题，将它添加为表单中的第一个字段。
回答by Diego Riccio TrunX
You could solve this problem just by removing the focus after the $("#order-popup").show();
你可以通过在 $("#order-popup").show(); 之后移除焦点来解决这个问题。
$(document).ready(function () {
$("#button").click(function () {
var dates2 = $("#datePicker3,#datePicker4").datepicker({
autoOpen: false,
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
var option = this.id == "datePicker3" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates2.not(this).datepicker("option", option, date);
calculate_total_price();
}
}); ///
$("#order-popup").dialog();
$("#order-popup").show();
$('#datePicker3, #datePicker4').blur();
});
});
