Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

datepicker-popup stopped working in UI Bootstrap 0.11.0 #2149

Closed
ngtrimble opened this issue May 5, 2014 · 30 comments
Closed

datepicker-popup stopped working in UI Bootstrap 0.11.0 #2149

ngtrimble opened this issue May 5, 2014 · 30 comments

Comments

@ngtrimble
Copy link

I am having an issue with UI Bootstrap 0.11.0. My datepicker-popup was working fine in 0.10.0. It is a simple that when the user clicks in it the datepicker appears.

In UI Bootstrap 0.11.0 the datepicker just does not popup any more. The problem can be reproduced at http://plnkr.co/edit/3fxVbuTxlTetNvQW4JeZ?p=preview. Just comment the 0.10.0 URL and uncomment the 0.11.0 URL.

Please let me know if I can provide anymore details. Thanks.

@bekos
Copy link
Contributor

bekos commented May 5, 2014

@ngtrimble You could read about removing the "open on focus" in the changelog, but you can also read my comment for the rationale of the decision and find a workaround if you still want to have this functionality.

@bekos bekos closed this as completed May 5, 2014
@avp
Copy link

avp commented May 20, 2014

If I use ng-focus, when I click on a date in the datepicker, I get the error:

Plunk example throws JS error:
Error: [$rootScope:inprog] $apply already in progress
errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24apply at
code.angularjs.org/1.2.16/angular.js:78:12 ...

See http://plnkr.co/edit/ct46CK6NRb9FWdpzfQpI?p=preview

@boillodmanuel
Copy link

+1.
I've the same error when I add ng-focus="dt.open = true" and click on a date in the popup.

@OlmoAcerta
Copy link

+1

We're also (intermittently) seeing the "$apply already in progress" error when we use the ng-focus fix. A possible solution might be to to set the is-open attribute using a setTimeout, but I haven't tried it.

We've decided (internally) to create a wrapper around datepicker which includes a "select date" button that opens the calendar.

@timdorr
Copy link

timdorr commented Jul 1, 2014

@bekos It's not mentioned anywhere in the changelog, which is why people are creating issues for this.

@unsalted
Copy link

unsalted commented Jul 4, 2014

^^agreed

@OlmoAcerta
Copy link

@avp @boillodmanuel FWIW we were able to solve the errors by using ng-click instead of ng-focus.

Unfortunately, due to the way manual date input works with the picker, we were asked to replace it by a jquery timepicker (https://github.com/Eonasdan/bootstrap-datetimepicker). Luckily this was after having created the wrapper, so it was a reasonably quick fix.

@avp
Copy link

avp commented Jul 7, 2014

@OlmoAcerta Using ng-click won't make it work when you tab into the field, which is what I would really like.

@scottkilker
Copy link

Can we please have the "focus" functionality put back in?

@cornel-masson
Copy link

Huh?

I have a standard date-picker which works in 0.10.0, but doesn't in 0.11.0. What's going on? My picker is declared with one attribute:

<input ... datepicker-popup="dd/MM/yyyy"...>

which, in 0.10.0, brought up the picker if I click in the input field, but now it does nothing. How can this possibly be acceptable behaviour?

@Rayton
Copy link

Rayton commented Jul 31, 2014

+1 have the same problem as the cornel-masson.
Also it could be nice if the datepicker should re-size and position according to the DOM like that in jqueryUI datepicker and bootstrap datepicker.
Can this feature be added or just create a directive to include jqueryUI datepicker?

@drewtunney
Copy link

+1 cornel-masson and rayton.

@sagar-ganatra
Copy link

Any update on this? This is affecting the project that I'm working on.

@kinstephen
Copy link

+1 sagar-ganatra on this too. Any update on this? I can't upgrade to .11 until this is fixed.

@ghost
Copy link

ghost commented Sep 5, 2014

Same "$apply already in progress" problem with the new is-open="isOpen" ng-focus="isOpen = true" approach, we upgraded from 0.9 a while back adjusted the project to suit, so discarding 0.11 not easy. Have tried all sorts of things. Is there a fix or hack? Can't find a solution unfortunately and we don't want to use a different datepicker library or different looking datepicker.

@gonzoyumo
Copy link
Contributor

@bekos, I was also a bit lost about that change as it's not mentioned at all in the Changelog.
Please find according PR here : #2675

@cassioam
Copy link

I found a work around:

<input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="myDate" is-open="data.isOpen" ng-click="data.isOpen=true" datepicker-options="myDateOptions" ng-required="true" close-text="Close" />

@gonzoyumo
Copy link
Contributor

@cassioam that's ok for click, but we still miss focus trigger :(

@cassioam
Copy link

@gonzoyumo ah, my bad.

@aaronkaka
Copy link

+1

@stringbeans
Copy link

+1, the ng-focus work around produces an $apply error that should probably be fixed

@martinstein
Copy link

I've created the separate issue #2789, because so many people seem affected by this problem.

@Igosuki
Copy link
Contributor

Igosuki commented Oct 9, 2014

It's simple, element[0].focus() on date selection triggers 'change' or some other event which then executes a digest

@JamieMcKenzie
Copy link

+1 @timdorr This needs to be in the change log - has been driving me crazy for days. Any news on fixes?

@OlmoAcerta
Copy link

@Igosuki Is there a work-around?

@cassioam
Copy link

Finally fixed: pedroxs@31e283d

@Igosuki
Copy link
Contributor

Igosuki commented Dec 2, 2014

@OlmoAcerta unfortunately nothing, patch the lib or rewrite it internally and make sure it's included in the right order.

@bobbyross
Copy link

Not sure if this solution would work for those who are still having issues with ng-focus and apply errors after selection. Just use the old focus work around by implementing a custom focus directive which checks if digest or apply is in progress.

.directive('fixFocus', ['$parse', function ($parse) {
            return function (scope, element, attr) {
                var fn = $parse(attr['fixFocus']);
                element.bind('focus', function (event) {
                    if (!scope.$$phase) {
                        scope.$apply(function () {
                            fn(scope, { $event: event });
                        });
                    }
                    else {
                        fn(scope, { $event: event });
                    }

                });
            }
        }])
<input name="Value" type="text" ng-model="entityDate.Value" is-open="dt.opened" fix-focus="dt.opened = true" datepicker-popup="MM/dd/yyyy"  />

@samsam
Copy link

samsam commented Feb 20, 2015

Could the popup functionality be made as a configurable option similar to showWeeks in a future release? Specifically regarding when a date field is clicked in or focused on?

@Gajananghuge
Copy link

datepicker-popup functionality not working and not getting any errors

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests