CODEWITHSUNDEEP
angularjsangular-ui
stampede76
stampede76

Reputation: 1631

angular ui datepicker refresh disabled dates

Does anyone have a solution to updating angular ui's disabled dates from a server response?

https://github.com/angular-ui/bootstrap/issues/779

You should create another directive that will require datepicker's controller. From your directive you should call the refreshView of the datepicker to reevalute the disabled dastes.

Does anyone have example code for that?

I'm trying to use angular ui datepicker so that the disabled dates are read from a server response. I change the datepicker's min date to force it to refresh.

I saw another stackoverflow page where the user had it refresh, but it relied on the datepicker calendar being clicked. Another one used set the date min attribute as the value of another field.

For me, I have a completely separate field from the date picker. When changed, it sends an http request to the server, and on a successful response the available dates are updated.

The only problem with changing the min date to force a refresh is that sometime's there same but with different dates to disable. I'm looking into changing a datepicker option I do not use to a random value to force a refresh.

Does anyone have a better way? I saw cross controller communication via a service, but this is a different module. I also saw a github issue where the datepicker controller can be

Upvotes: 1

Views: 6488

Answers (2)

wyu
wyu

Reputation: 1813

The angular bootstrap datepicker has datepicker-options

This user listed the solution: https://github.com/angular-ui/bootstrap/issues/2189#issuecomment-225685104

bogdandrumen commented on Jun 13 

Use datepicker-options="{minDate: yourScopeMinDate}"

which worked for me. I have two pickers, the second picker cannot be greater than the first one so if the first picker changes, the second picker's max date also changes.

Upvotes: 1

edrian
edrian

Reputation: 4531

I've found a simple solution to this problem using a decorator: https://gist.github.com/cgmartin/3daa01f910601ced9cd3

Then, you only need to call $scope.$broadcast('refreshDatepickers') to refresh the datepickers.

IMPORTANT: For more recent ui-bootstrap datepicker library, you may need to replace 'datepickerDirective' with 'uibDatepickerDirective' if you are using datepicker with uib-datepicker element or attribute.

Upvotes: 1

Related Questions