禁用jQuery UI日期选择器的焦点设置

jQueryUIDatePicker有一个选项，只有在单击按钮图像时才打开datepicker。请参见以下示例：

问题在于，一旦datepicker打开，焦点就在textfield中。是否可以禁用焦点设置

---

在iPhone等移动设备上使用上述页面时，键盘会弹出，因为文本字段会获得焦点。这不是真正的用户友好，因为您必须关闭键盘才能真正访问日期选择器并使用它…

如果您使用的是jQuery Mobile-，那么您可能需要查看一些面向移动的日期选择器。 我在试用了其他几种日历后，使用了实验性的（来自alpha 4），因为我们想要一个漂亮的日历视图。它基本上只是在现有日期选择器的基础上添加了几个css类。我使用的版本，所以它的作品作为一个弹出窗口。为了防止键盘打开，我只需在接收到焦点之后，在显示选择器之前，添加一个jQuery模糊事件

$this.blur（）

。模糊事件发生得足够快，以至于键盘永远不会打开

---

如果没有-您可能会想做同样的事情。不过，我不知道有什么方法不编辑代码就可以做到这一点。

如果禁用输入，键盘将永远不会弹出。像

    <input type="text" id="date_picker_field" name="date" disabled/>

---

将输入设置为只读

<input type="text" id="datePicker" readonly>

---

在移动设备上测试时，我遇到了同样的情况，键盘/键盘在我选择日期之前弹出。我刚刚在里面添加了一个属性readonly=“true”

---

但是，请确保编辑CSS并指定cursor:pointer，因为每次您在桌面视图中悬停时，它都会显示一个问号。

我在正在使用的应用程序上遇到同样的问题。我从jQuery文件中注释掉了这些行，以防止它在单击日历图标后立即在文本字段上自动设置焦点。我的申请成功了

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}

---

我有缩小版v1.11.4，在jquery-ui.min.js中我发现了两次

datepicker.\u应该聚焦输入（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")
}

---

仍在寻找不更改核心文件的修复方法…

我找到了一个解决方法，在打开日期选择器并在100毫秒后启用它之前，使用jQuery禁用输入字段：

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

---

在Chrome和Android 5.1.1上的cordova上进行了测试。

通过将datepicker showOn选项设置为“无”，达到了预期效果

datepicker实现理解showOn选项的“焦点”、“按钮”和“两者”值。默认设置为“焦点”。因此，从技术上讲，传递除这3个值以外的任何值都应该有效。

---

不过需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任就在您身上。

这是一个较老的问题，但如果您无意中发现了解决同一问题的方法，我相信现代浏览器中的解决方案是使用

inputmode=“none”

在HTML输入标记中：

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});

<input type="text" ... inputmode="none" />

---

我没有对它进行过广泛的测试，但它在Android中使用的设置很好。

备选方案：DateBox-例如：jquery.ui.datepicker.min.js#booking datepicker将使用readonly启动click事件，但是#booking timepicker no.您可以在（'click'，function（）{$（this）。removeAttr（'readonly'）；$（this）。触发器（'click'）；}）；工作正常，加上一点css魔法，它看起来像一个普通的输入字段，带有指针作为光标。谢谢Michal Shulman！但是提交表单时不会提交一个禁用字段。您可以在调用.datepicker（'show'）前后调用.attr（'disabled）和.removeAttr（'disabled'）

<input type="text" ... inputmode="none" />