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

Posted 2023-03-31

【中文标题】禁用 jQuery UI 日期选择器的焦点设置

【英文标题】：Disable setting of focus for jQuery UI datepicker

【发布时间】：2011-08-02 12:13:43

【问题描述】：

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

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

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

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

【问题讨论】：

替代方案：DateBox - dev.jtsage.com/jQM-DateBox

【参考方案1】：

将输入设置为只读

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

【讨论】：

例如：jquery.ui.datepicker.min.js #booking-datepicker 会以只读方式触发点击事件，但 #booking-timepicker 没有。您可以添加 $('input').on('click', function() $(this).removeAttr('readonly'); $(this).trigger('click'); );

工作正常，并带有一点 css 魔法，它看起来像一个以指针为光标的普通输入字段。谢谢你米哈尔舒尔曼！

【参考方案2】：

如果您禁用输入，则键盘永远不会弹出。喜欢...

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

【讨论】：

但是在提交表单时没有提交禁用的字段。

你可以在调用.datepicker('show')之前和之后调用.attr('disabled and .removeAttr('disabled')

【参考方案3】：

通过将 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 个以外的任何值都应该有效。 不过需要注意的是，一旦默认功能被覆盖，管理日期选择器日历的正确显示的责任就落在了您身上。

【参考方案4】：

这是一个较老的问题，但是如果您偶然发现它正在寻找解决相同问题的方法，我相信现代浏览器中的解决方案是在 html 输入标记中使用 inputmode="none"：

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

我没有对它进行广泛的测试，但它在我使用的设置下在 android 中运行良好。

【参考方案5】：

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

如果没有- 你可能想做同样的事情。不过，我不知道有一种方法可以在不编辑代码的情况下做到这一点。

【参考方案6】：

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

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

【参考方案7】：

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

仍在寻找不更改核心文件的修复程序...

【参考方案8】：

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

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

【参考方案9】：

我找到了一种解决方法，方法是在打开日期选择器之前使用 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 上测试。

【参考方案10】：

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