jQuery UI date picker makes problems with mobile devices

Question

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!

Julian Julian · Accepted Answer · 2014-08-15T20:28:34

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

jQuery UI date picker makes problems with mobile devices

1 Answers