jQuery UI 日期选择器使移动设备出现问题

Question

我们正在使用this jQuery UI date picker wrapper，它适用于该网站的桌面版。

但在移动设备方面，我们确实遇到了一个大问题。然后，当我单击输入字段时，会显示日期选择器，并且还会显示使用一半屏幕的移动键盘。

目前我们的指令看起来像这样（CoffeeScript）：

"use strict"

angular.module("theapp").directive "datePicker", ->
  restrict: 'EA'
  scope:
    model: '='
    name: '@'
    required: '@'
    options: '='
  template: '<input type="text" ui-date="dateOptions" ng-model="model" ng-required="{{ required }}">'
  replace: true
  link: (scope, element, attrs) ->
    scope.required ?= false

    scope.dateOptions =
      dateFormat: "dd.mm.yy"
      yearRange: "1900:-0"
      changeYear: true
      changeMonth: true
      regional: "de"
    _.extend(scope.dateOptions, scope.options)

到目前为止我尝试了什么：

• 一旦获得焦点就模糊​​输入字段。 结果：手机键盘闪烁两次。
• 将类型从文本更改为按钮。 结果：它在桌面上运行良好，但在移动设备上却不行。也许我在这里做错了什么。

有人知道如何解决这个问题的好方法吗？

谢谢！

Answer 1

在输入中添加readonly="readonly"，键盘将不再在移动设备上弹出（仅在 iPhone 上测试）：

<input type="text" id="date_picker" readonly="readonly" />