jQuery UI 日期选择器有一个选项可以仅在单击按钮图像时打开日期选择器。请参阅以下示例：
http://jqueryui.com/demos/datepicker/#icon-trigger
问题在于，只要打开日期选择器，焦点就在文本字段中。是否可以禁用焦点设置？
在 iPhone 等移动设备上使用上述页面时，键盘会弹出，因为文本字段获得焦点。这并不是真正的用户友好，因为您必须关闭键盘才能真正进入日期选择器并使用它...
【问题讨论】：
标签： jquery mobile jquery-mobile jquery-ui-datepicker
将输入设置为只读
<input type="text" id="datePicker" readonly>
【讨论】：
如果您禁用输入，则键盘永远不会弹出。喜欢...
<input type="text" id="date_picker_field" name="date" disabled/>
【讨论】：
通过将 datepicker showOn 选项设置为“none”来获得所需的结果。
$(#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 );
}
});
datepicker 实现理解 showOn 选项的“focus”、“button”和“both”值。默认设置为“焦点”。因此，从技术上讲，传递除这 3 个以外的任何值都应该有效。 不过需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任就落在了您身上。
【讨论】：
这是一个较老的问题，但是如果您偶然发现它正在寻找解决相同问题的方法，我相信现代浏览器中的解决方案是在 HTML 输入标记中使用 inputmode="none"：
<input type="text" ... inputmode="none" />
我没有对它进行广泛的测试，但它在我使用的设置下在 Android 中运行良好。
【讨论】：
如果您使用的是 jQuery Mobile-，那么您可能想要查看一些面向移动设备的日期选择器。
在尝试了其他几个之后，我正在使用实验性的jQueryUI mobile datepicker（来自 alpha 4），因为我们想要一个漂亮的日历视图。它基本上只是在现有的日期选择器之上添加了一些 css 类。我正在使用Edited 版本，因此它可以作为弹出窗口使用。为了防止键盘打开，我只需在它接收到焦点之后在显示选择器之前添加一个 jQuery 模糊事件$this.blur()。模糊事件发生得足够快，以至于键盘永远不会打开。
如果没有- 你可能想做同样的事情。不过，我不知道有一种方法可以在不编辑代码的情况下做到这一点。
【讨论】：
我在正在处理的应用程序上遇到了同样的问题。我从我的 jQuery 文件中注释掉了这些行，以防止它在单击我的日历图标后立即自动将焦点设置在文本字段上。它适用于我的应用程序。
if ( $.datepicker._shouldFocusInput( inst ) ) {
inst.input.focus();
}
【讨论】：
我有缩小版 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")
}
仍在寻找不更改核心文件的修复程序...
【讨论】：
我在移动设备上进行测试时遇到了同样的情况，即在我选择日期之前弹出键盘/小键盘。我刚刚在里面添加了一个属性 readonly="true"
但是，请务必编辑 CSS 并指定 cursor:pointer，因为每次您将鼠标悬停在桌面视图中时它都会显示一个问号。
【讨论】：
我找到了一种解决方法，方法是在打开日期选择器之前使用 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 上测试。
【讨论】：
$('#dateIniPick').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
allowInputToggle: true
});
【讨论】：