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

Question

我们正在使用这个jQuery UI日期选择器包装器 ，它适用于站点的桌面版本。

但是，当谈到移动设备时，我们确实遇到了很大的问题。 然后，当我点击输入字段时，日期选择器显示出来，此外还会出现移动键盘，它使用了一半的屏幕。

目前我们的指令看起来像这样（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"添加到输入中，键盘将不会再出现在mobiel设备上（仅在iPhone上测试）：

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