date picker dd.MM.yyyy

[fopsdev]

hi there, i'm testing the datepicker within angular 1.2.2 and bs 3 using our common swiss (and german) date format dd.MM.yyyy
just recognised that entering the date value manually in the textbox does not work as expected. it still uses the first number as the month.

http://plnkr.co/edit/1pdDca5KuWOWh3vPVRvz?p=preview

[pkozlowski-opensource]

@fopsdev this won't work out of the box without 3rd party dependencies. The problem is that when converting from text->Date objects we are limited to what JavaScript can parse as string by default. And it is seldom locale-aware. If you need to support custom formats you will need to write a custom parser and - most probably - add dependency on a library that can do this, moment.js for example.

There is an example of such custom parser here:
https://github.com/IgorMinar/directives-workshop/blob/master/src/05_ngmodelctrl_parse_format/exercise/solution/datefield.js

We need to improve here and add more documentation so keeping this issue open. But just wanted to share quick info.

[blowsie]

Copying my issue from #1746
As a plunkr and video is always useful.

---

When changing the date input manually it ignores the i18n locale pattern.

Picking the date from the buttons works fine but changing the input switches the day and month, at least when using the en-gb locale.

I'd image other locales are broken too. This is pretty critical in my opinion.

Plunkr

http://plnkr.co/edit/6bwHMKY48mRDdTjZMw00?p=preview

Video of issue.

https://dl.dropboxusercontent.com/u/14037764/Development/github/ui.bootstrap/datepicker.html

[awallat]

I had the very same problem and ended up writing my own directive. It's not that beautiful but works so far for me. Please have a look here: http://developer.the-hideout.de/?p=119

[blowsie]

I ended up disabling the text input, meaning you can only pick the date via the picker. Not the best experience but stops this bug occurring.

[blowsie]

Looking at the code, this fix only fixes the dd.MM.yyyy and still doesn't allow for other formats, is this correct?

[bekos]

@blowsie Which part of the code makes you tell this? This is supposed to be a general solution.

[blowsie]

I may have overlooked this but... this line, and the unit test suggest only the dd.MM.yyy have been added $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];

[bekos]

On the unit tests and the demo page we cannot add every possible use case. The component responsible for parsing is dateparser with much more test cases. https://github.com/angular-ui/bootstrap/blob/master/src/dateparser/test/dateparser.spec.js

[jakobloekke]

Why is this issue closed?
Here's a codepen with Danish locale where changing the date in the input field is interpreted as month: http://codepen.io/jakobloekke/pen/hcsyJ

[ftheomunhoz]

What we have been using as a workaround is:

• Add ng-readonly="true" to the input
• Use the following class (or similar):

input[ui-date] {
background-color: white !important;
cursor: default !important;
}

Here is a plunker with an example:
http://plnkr.co/edit/BYkOghQ67Qq8sYPA4omC?p=preview

The draw back is how it affects the usability, not allowing the user to type, although it is better than breaking the application.

[blowsie]

@ftheomunhoz as I mentioned in my comment above, you can just disable the input using the disabled attribute.

[svarjavand]

Why is this issue and all its referenced ones are closed? DatePicker still don't work with dd/MM/yyyy format when date is entered manually.
Try the plunker on https://angular-ui.github.io/bootstrap/#/datepicker and enter 24/05/2015
current version is:
angularjs: 1.3.13
bootstrap-ui: 0.13.0

[rvanbaalen]

@svarjavand it seems like either this is broken again or @bekos closed it too fast. Reopening.

[rvanbaalen]

On a second thought @svarjavand please create a new issue to prevent this one from being polluted. This is closed because the actual issue is fixed; dates with dd.MM.yyyy format work.

[svarjavand]

@rvanbaalen I can create a new issue but even dd.MM.yyyy format doesn't work.
Try the plunker on the demo page and enter 24.05.2015 in the popup date picker. Selected date will be empty.

[rvanbaalen]

Fair enough. Reason enough to keep this open.

[realityking]

That's likely the issue described in #3644 (potential fix in #3682)

[hendrikebbers]

With version 0.13 the console shows the following error when typing the date "23.12.2007" (pattern: dd.MM.yyyy) directly after typing 23:
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.(anonymous function) @ angular.js:11655render @ ui-bootstrap-tpls.js:1071init.ngModelCtrl.$render @ ui-bootstrap-tpls.js:1059ngModelWatch @ angular.js:23423

This is working with version 0.12