Question

jQuery UI datepicker有一个选项，只在单击按钮图像时打开日期选择器。请参阅以下示例：

http://jqueryui.com/demos/datepicker/#icon-trigger

问题是，只要日期选择器打开，焦点就会出现在文本字段中。是否可以禁用焦点设置？

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

Answer 1

将输入设置为 ReadOnly

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

Answer 2

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

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

Answer 3

如果您使用的是jQuery Mobile - ，那么您可能想要查看一些面向移动设备的日期选择器。在尝试了其他几个之后，我正在使用实验jQueryUI mobile datepicker（来自alpha 4）因为我们想要一个漂亮的日历视图。它基本上只是在现有的datepicker之上添加了一些css类。我正在使用Edited版本，因此它可以作为弹出窗口。为了防止键盘打开，我只需在显示选择器之前接收焦点后立即添加jQuery模糊事件$this.blur()。模糊事件发生得足够快，键盘永远不会打开。

如果不是 - 您可能想要做同样的事情。我不知道如何在不编辑代码的情况下做到这一点。

Answer 4

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

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

Answer 5

我有缩小版本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")
}

仍在寻找修补程序而不更改核心文件...

Answer 6

通过将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之外的任何其他值都应该有效。但需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任在于你。

Answer 7

在我在移动设备上测试时选择日期之前，我遇到了弹出键盘/键盘的问题。我刚刚在

中添加了一个属性readonly =“true”

但是，请务必编辑CSS并指定cursor：pointer，因为每次将鼠标悬停在桌面视图中时都会显示一个问号。

Answer 8

我通过在打开datepicker之前使用jQuery禁用输入字段并在100ms之后启用它来找到解决方法：

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

在Chrome 5.1.1上测试Chrome以及cordova。

Answer 9

这是一个比较老的问题，但是如果您偶然发现了一个问题，我想相信，我在现代浏览器中的解决方案是在HTML输入标签中使用inputmode="none" ：

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

我还没有对其进行广泛的测试，但是使用我使用的设置，它在Android系统中运行良好。

Answer 10

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

禁用jQuery UI datepicker的焦点设置

10 个答案: