日期选择器自动打开
我有一个javascript代码，我想用它完成以下操作。 我希望当我点击按钮时出现一个表单，但是datepicker的日期选择选项不会自动出现（但在我的情况下它会打开）。 所以换句话说，我的魔杖禁用了autoopen。 这是脚本
$(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(); }); });
datapicker立即显示的原因是因为加载datapicker的input默认具有focus .. 请参阅此处 – 这是因为它是表单上的第一个input ….如果在第一个input之前添加另一个input – > http://jsfiddle.net/JXtBM/1/
解决此问题的一种方法是使用按钮触发datepicker的打开：
showOn: "button", buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif", buttonImageOnly: true,
这里的工作示例
如果你不想把焦点放在日期选择器上，你可以在它们之前加上另一个输入并使它“隐形”
在这种情况下，输入的高度为0px，并且不在屏幕之外，因此不会显示。 请记住，应始终选择日期，由于日期格式，分隔符等，允许用户编写风险…
正如ManseUK所说，这是因为对话框方法会自动选择父元素中的第一个“tabbable”元素。 如另一个问题所示，这是硬编码。
一种解决方法（我认为看起来很奇怪，但有效），就是将选项卡索引设置为输入上方的另一个元素，如下所示：
将标签索引设置为另一个元素有助于重新解决问题，如下所示：
****
创建后触发’模糊’为我解决了问题。 我认为这是一个工作场所，但它确实起到了作用。
我不想添加按钮来打开日历，也不想在我的文档中添加额外的输入。
$('[data-datepicker="datepicker"]').datepicker().trigger('blur');
尝试将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(); } }); });
并且click函数仅包含：
$("#order-popup").dialog(); $("#order-popup").show();
我不是100％肯定这会起作用，但至少是正确的初始化方法（如果你已经在页面上有它，初始化准备就绪）
你可以通过在$（“＃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(); }); });
最佳选择是在另一个元素上设置“autofocus”属性。 当jquery打开对话框时，它将查找具有autofocus属性的元素并将焦点设置为它。 如果未找到，则将焦点设置为第一个可见元素。
我通过在表单中添加第一个字段来解决这个问题。