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!