jQuery UI日期选择器使移动设备出现问题(jQuery UI date picker makes problems with mobile devices)

jQuery UI日期选择器使移动设备出现问题(jQuery UI date picker makes problems with mobile devices)

我们正在使用这个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)

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

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

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

谢谢！

We are using this jQuery UI date picker wrapper which is working fine for the Desktop version of the site.

But we do have a huge problem when it comes to a mobile device. Then when I click on the input field, the datepicker shows up and additionally the mobile keyboard appears as well which uses half of the screen.

Currently our directive looks like this (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)

What I tried so far:

Bluring the input field as soon as it gets focus. Result: The mobile keyboard flickers twice. Changing the type from text to button. Result: It works just fine on a Desktop, but not on a mobile device. Maybe I'm doing something wrong here.

Anyone knows a good solution how to fix that?

Thank you!

最满意答案

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

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

Add readonly="readonly" to the input and the keyboard won't pop up anymore on mobiel devices (tested on iPhone only):

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