1

If I create a HTML5 date input like

<input type="date" required ng-model="mydate">

I get a localized input by supported browsers, like

enter image description here

in Chrome, where the German date input pattern dd.mm.YYYY is used. If I open the same page in a browser that does not support those inputs, like IE or Firefox, it is displayed as a regular text input (and that's totally okay). My problem is the form validation of angularjs, that forces the user to enter the date as YYYY-mm-dd.

Is there any way to modify the validation input pattern of Angular.js 1.3 for unsupported browsers to allow the German input pattern? If it is not possible, can the validation of angular.js be completely disabled, so I can validate the input by myself (but still have input[type="date"], so supported browserse show a date picker)?

I have created a Fiddle to demonstrate the issue.

Improve this question
4
  • There seems to be much more than a simple html5 input here, but I would suggest you to use the jQuery UI datepicker : it works pretty well and has a thousand of parameters to allow you to manipulate dates very very very easily. If angularJS is expecting YYYY-mm-dd, you can just make a jQuery UI datepicker that shows a datepicker and insert the date in the YYYY-mm-dd format. jqueryui.com/datepicker Also, it's a regular <input>, so it won't affect anything at all . Doc: api.jqueryui.com/datepicker --> dateFormat: api.jqueryui.com/datepicker/#option-dateFormat Commented Apr 1, 2015 at 10:53
  • @briosheje thank you for your hint, but I would really prefer a native solution, as the site need to work on smartphones as well, and I haven't yet found a good responsive date picker, especially for small Android screens, while the native solution works great on iOS and Android.. Commented Apr 1, 2015 at 10:56
  • 1
    jQuery UI datepicker works perfectly on mobile devices aswell. Not sure if it perfectly works with very very very small mobile devices, but in such a case you may want to listen to the user's input and edit it if the format is not the desired one (by using a regular text input instead of a date input)... Perhaps you may want to use a placeholder to give a tip to the user in such a case :P Commented Apr 1, 2015 at 10:58
  • 1
    @briosheje: Here is a fiddle for !muffel -> jsfiddle.net/wgasr49o Commented Apr 1, 2015 at 11:34
Related questions
11
AngularJS: How to validate date in US format?
5
AngularJS directive to prevent input of invalid date
1
how to validate date format in angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.