uib-datepicker-popup formatting problem

[char0n]

Hi,

There seems to be a problem with uib-datepicker-popup and formatting. I am currently using version 0.14.2 but I can confirm that affected was also 0.14.1. The problem is when I declare in html datepicker popup like this:

<input ...uib-datepicker-popup="dd/MM/yyyy"... /> - the date will not be in displayed

When I fallback to

<input ...datepicker-popup="dd/MM/yyyy"... /> - the date will be displayed correctly but I see the deprecation message.

It seems to be a regression in behavior for datepicker-popup. Also note that
uib-datepicker-popup="yyyy-MM-dd" works as expected. But when you change the format to anything different the dates are not displayed anymore.

[char0n]

Further investigation revealed the cause of the problem. The behavior is not expected only where there is additional attribute on input: required="true" respectively ng-required="true"

[icfantv]

@char0n, please create a minimal, working plunker that shows the issue and link it here. I want to see if this is a duplicate of #4607.

[char0n]

Hi,

Here is the plnkr: http://plnkr.co/edit/FMHFNyzC6jlfd43uz6vF?p=preview

I forked the plnkr from @Neilski from #4607 and change version to 0.14.2.

Seems like a 100% duplicate.

[icfantv]

@char0n, our demo is working fine - please use that as a launching point and feel free to reopen if you think there is still a bug.

[Neilski]

Thank you for your continued help.

Using your demo at http://angular-ui.github.io/bootstrap/#/datepicker, if I change line #36 from:

To:

In other words I replace the uib-datepicker-popup value from "{{format}}" to the UK date format of "dd/MM/yyyy" the initial model value is nulled in the first of the two popup date input fields.

This only seems like a problem if:

• An initial model value is set
• The attribute ng-required or required is specified
• the date format is non-default - in my test case UK format (dd/MM/yyyy)

Hope this helps.

[char0n]

Yes, I can confirm. Thanks.

The only workaround I could come up with is to use old datepicker-popup instead of uib-datepicker-popup.

[icfantv]

@Neilski, you're missing some text from your comment.

[Neilski]

Thank you for your continued help.

Using your demo at http://angular-ui.github.io/bootstrap/#/datepicker

When the page loads, observe that the first date input field (under the 'Popup' heading) contains the value of the date ('15-October-2015')

If you then change line #36 from:

<input type="text"
       class="form-control" 
       uib-datepicker-popup="{{format}}"
       ng-model="dt"
       is-open="status.opened"
       min-date="minDate"
       max-date="maxDate"
       datepicker-options="dateOptions"
       date-disabled="disabled(date, mode)"
       ng-required="true"
       close-text="Close" />

to:

<input type="text"
       class="form-control"
       uib-datepicker-popup="dd/MM/yyyy"
       ng-model="dt"
       is-open="status.opened"
       min-date="minDate"
       max-date="maxDate"
       datepicker-options="dateOptions"
       date-disabled="disabled(date, mode)"
       ng-required="true"
       close-text="Close" />

when the page is refreshed note that the input field is now blank.

In other words if I replace the uib-datepicker-popup value from {{format}} to the UK date format of dd/MM/yyyy the initial model value is nulled in the first of the two popup date input fields.

This only seems like a problem if:

• An initial model value is set
• The attribute ng-required or required is specified
• the date format is non-default - in my test case UK format (dd/MM/yyyy)

Hope this helps.

[icfantv]

I'm still investigating this, but if you change $scope.format = $scope.formats[0] to $scope.format = $scope.formats[2] in the plunker's example.js it works. Why that is the case I don't know and am still looking into it.

You should be able to use this as a workaround in the interim.

[Neilski]

Even more strange is that if I change line #36 of the example.js from

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];

to

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd/MM/yyyy', 'shortDate'];

and then change the default formats selection from zero to two (to select the 'dd/MM/yyy' array element on line #37

$scope.format = $scope.formats[2];

It works too. It almost seems to be that the data is being bound before the format statements are being evaluated when the format is presented inline.

[Neilski]

I have done a little more testing and I think I can explain the problem. In fact, the problem only exists if you define the date format inline

 uib-datepicker-popup="dd/MM/yyyy"

if you define the format in the scope

$scope.format = "dd/MM/yyyy";

and

 uib-datepicker-popup="{{format}}"

Then everything works as expected. I am guessing that this is due to the ordering of the JavaScript controller and the parsing of the HTML properties. In this respect, the behaviour is understandable if not intuitive.

[icfantv]

i'm having someone smarter than I look at this. the workaround stinks, but at least one exists.

[aylara]

If you follow the example of the documentation https://angular-ui.github.io/bootstrap/#/getting_started, you can see using a controller to manage the scope . In my case, if I put a directive does not work. With a controller Yes!

[DiV666]

Hi,

I have another problem with the format, it is that when I use a literal character, the scope loses its value.

For example, "dd 'of' MMMM" or "longDate" which also has literal characters

I made a plunker so you can see how it affects the problem when a calendar date is selected:
http://plnkr.co/edit/txZaESlPRZt0ue2nfKHS?p=preview

Does anyone know how to fix this?

Thank you

[timothylombrana]

Im having similar error: Version 0.14.3
Ive tried all suggestion above with no success.

<div class="col-sm-2 account-calendar" ng-show="tr.date == 'custom' || tr.date == 'week'">
    <input type="text"
           class="form-control"
           placeholder="Start Date"
           id="startDate"
           ng-click="open($event, 'startDate'); close('endDate');"
           uib-datepicker-mode="'day'"
           max-mode="'day'"
           show-weeks="false"
           uib-datepicker-popup={{userPrefDateFormat}}
           ng-model="tr.startDate"
           is-open="opened.startDate"
           custom-class="setRangeClass(date, mode)"/>

    <div class="icon-calendar" ng-click="open($event, 'startDate'); close('endDate');"></div>
</div>

[icfantv]

@alphapilgrim 0.14.3 is quite old at this point. you might want to try 1.3.3 or 2.0.0 (but there are some issues w/ nested modals and datepicker model options) in 2.0.

[timothylombrana]

@icfantv migration to new version is pretty much impossible right now. I need a solution.

[icfantv]

@alphapilgrim, ok. just so you know, we do not issue patches for back versions.

[timothylombrana]

@icfantv has this been a known bug?

[MuhammadTayyeb]

when i edit Datepicker the can't pickup the data.

[icfantv]

@alphapilgrim, sorry, it's been too long at this point. are you asking if it's a known bug in 0.14.3? if so, i have no idea. if it's a bug in master, we can certainly take a look if a proper issue w/ reproduction is filed.

@MuhammadTayyeb please do not hijack threads. if you require support, please read our project README for how to properly ask for (and receive) help.

[MuhammadTayyeb]

Kindly see the attachment. when i am edit the date. but they can't show the Edit date. but it will available in backend

[MuhammadTayyeb]

i use same DatePicker which you. i have issue occur when i am edit the datepciker

[white-hawk-feather]

I am had a similar problem. I use DatePicker popup in many places and I had this behavior:

1. No issue when entering the date the first time;
2. Issue when presenting the form for update. In spite the fact that the date is in ng-model and DatePicker show it when you open the calendar, the bar is blank.

Here 2 samples of the situation I described with the json of the objects and the dates. You see that the first one has the issue, the second no.

Observing the dates I realized that the ones coming from user input have milliseconds, the ones coming from DB do not have milliseconds. I changed the code to have the milliseconds and everything worked fine. The simplest way is doing something like this:

var dateForDatePicker = new Date (dateFromDB);

and everything is working fine, with any formatting string.

[white-hawk-feather]

I confirm, also if the variable is a DateTime coming from a DB, during initialization you have to do:

yourDate = new Date(yourDate);

and everything works, no format issue.