jQuery UI日期选择器有一个选项，只有在单击按钮图像时才会打开它。 请参见以下示例：
http://jqueryui.com/demos/datepicker/#icon-trigger
问题是，当日期选择器打开时，焦点立即在文本字段中。 是否可以禁用设置焦点？
在像iPhone这样的移动设备上使用上述页面时，键盘弹出，因为文本字段获得了焦点。 这不太用户友好，因为您必须关闭键盘才能实际进入日期选择器并使用它......
禁用jQuery UI日期选择器的焦点设置
22
- black666
1
1备选方案：DateBox - http://dev.jtsage.com/jQM-DateBox/ - Phill Pafford
10个回答
46
将输入设置为只读
<input type="text" id="datePicker" readonly>
- Michal Shulman
2
在这个例子中，jquery.ui.datepicker.min.js #booking-datepicker将使用readonly触发click事件，但#booking-timepicker不会。您可以添加$('input').on('click', function() { $(this).removeAttr('readonly'); $(this).trigger('click'); });来解决这个问题。 - fearis
1运行良好，再加上一点 CSS 魔法，它看起来就像一个带有指针光标的普通输入字段。谢谢 Michal Shulman！ - user3714751
3
通过将datepicker showOn选项设置为“none”来实现所需的结果。
日期选择器可以通过 showOn 选项理解 "focus"，"button" 和 "both" 值。默认设置为 "focus"。因此，从技术上讲，传递除这三个值之外的任何值都应该起作用。 但是需要注意，一旦覆盖了默认功能，则需要自己负责管理日期选择器日历的正确显示。
$(#startdate").datepicker({
defaultDate : "+7d",
minDate: "+7d",
changeMonth : true,
changeYear : true,
yearRange : "c:c+1",
numberOfMonths : 1,
showOn: "none",
dateFormat : "dd-MM-yy",
onClose : function(selectedDate) {
$("#startdate").val(selectedDate);
$( "#enddate" ).datepicker( "option", "minDate", selectedDate );
}
});
日期选择器可以通过 showOn 选项理解 "focus"，"button" 和 "both" 值。默认设置为 "focus"。因此，从技术上讲，传递除这三个值之外的任何值都应该起作用。 但是需要注意，一旦覆盖了默认功能，则需要自己负责管理日期选择器日历的正确显示。
- Anurag Joshi
2
这是一个比较旧的问题，但如果你在寻找解决相同问题的方法时偶然遇到了它，我认为现代浏览器的解决方案是在HTML输入标签中使用
inputmode="none"。请注意保留HTML标签。<input type="text" ... inputmode="none" />
我没有进行过全面测试，但在我使用的Android设置中它表现良好。
Original Answer翻译成"最初的回答"
- Peter Bowers
2
如果您将输入框设为禁用状态，键盘将永远不会弹出。例如...
<input type="text" id="date_picker_field" name="date" disabled/>
- user981971
2
3当表单被提交时，禁用的字段不会被提交。 - David Cooke
在调用 .datepicker('show') 之前和之后，您可以调用 .attr('disabled') 和 .removeAttr('disabled')。 - Omu
1
如果您正在使用jQuery Mobile- 那么您可能想要查看一些移动设备定向的日期选择器。
我正在使用实验性jQueryUI 移动设备日期选择器（来自alpha 4），在尝试了其他几个之后，因为我们想要一个漂亮的日历视图。它基本上只是在现有日期选择器的基础上添加了一些CSS类。我正在使用编辑过的版本，以便它可以作为弹出窗口使用。为了防止键盘打开，我只需在选择器显示之前，在它获得焦点后立即添加一个jQuery模糊事件$this.blur()。 模糊事件发生得足够快，以至于键盘永远不会打开。
如果没有- 您可能想要做同样的事情。但我不知道有没有不编辑代码的方法。
- Danny C
1
我有一个压缩版的v1.11.4，我在jquery-ui.min.js文件中发现了两次。
datepicker._shouldFocusInput(t)&&t.input.focus()
我移除了&&t.input.focus()，现在它可以正常工作。
另外值得注意的是：
_shouldFocusInput:function(e){
return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}
仍在寻找不更改核心文件的解决方案...
- PiTheNumber
1
我正在开发的应用程序也遇到了同样的问题。我注释掉了jQuery文件中的这些行，以防止它在单击日历图标后立即自动将焦点设置在文本字段上。对我的应用程序起作用。
if ( $.datepicker._shouldFocusInput( inst ) ) {
inst.input.focus();
}
- Walt
0
我在移动设备测试时遇到了同样的问题，即在选择日期之前键盘/键盘弹出。我只需在标签内添加一个属性readonly="true"。
然而，请务必编辑CSS并指定cursor: pointer，因为在桌面视图中每次悬停时都会显示一个问号。
- iamhonee
0
我通过在打开日期选择器之前使用jQuery禁用输入字段，然后在100毫秒后启用它来找到了一个解决方法：
$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
$selected.prop('disabled', false);
}, 100);
已在Chrome上测试，并且在Android 5.1.1上使用cordova进行了测试。
- Bjoerg
-2
$('#dateIniPick').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
allowInputToggle: true
});
- Mahendra Singh Yadav
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接