current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 1 down vote favorite

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.

share|improve this question
    
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 – briosheje Apr 1 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.. – muffel Apr 1 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 – briosheje Apr 1 at 10:58
1  
@briosheje: Here is a fiddle for !muffel -> jsfiddle.net/wgasr49o – Mr. Polywhirl Apr 1 at 11:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.