javascript - 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" />