How to dynamically set properties for AngularJS jQueryUI datepicker directive

Question

I have a need to set the min Date for one of my datepicker inputs to 5 days after today's date. I have setup the jQueryUI datepicker directive for AngularJS, and by itself, it works great. When I try to add any properties to the input for an individual datepicker, such as 'min' (Date), it does not appear to honor the property, and shows me all dates.

sorry for not having a jsfiddle or plunker

EDIT: Updated to show solution

index.html

<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>

Datepicker.js

app.directive('ssDatepicker', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl){
            $(function(){
                element.datepicker({
                    dateFormat:'dd-M-yy',
                    showOn: 'both',
                    buttonImage: "/e/images/calendar-ui.gif",
                    buttonImageOnly: true,
                    buttonText:'Choose a Date',
        beforeShow: function(element, datepicker){
            if(attrs.minDate){
                            angular.element(element).datepicker("option", "minDate", attrs.minDate);
            }
            if(attrs.maxDate){
                            angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
            }
        },
                    onSelect:function(date){
                        scope.$apply(function(){
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

Thanks in advance!

BillF · Accepted Answer · 2013-12-10 13:23:36Z

Okay, thanks to Sebastian, I was able to figure it out. It doesn't, for some reason, like a date variable for the "min-date" attribute, but it will accept the offset, which, for my purposes, works exactly as needed. I am fairly sure that it is a formatting problem with the date that prevented it from working.

    app.directive('ssDatepicker', function(){
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, element, attrs, ngModelCtrl){
                    $(function(){
                        element.datepicker({
                            dateFormat:'dd-M-yy',
                            showOn: 'both',
                            buttonImage: "/e/images/calendar-ui.gif",
                            buttonImageOnly: true,
                            buttonText:'Choose a Date',
                            beforeShow: function(element, datepicker){
                                if(attrs.minDate){
                                    angular.element(element).datepicker("option", "minDate", attrs.minDate);
                                }
                                if(attrs.maxDate){
                                    angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
                                }
                            },
                            onSelect:function(date){
                                scope.$apply(function(){
                                    ngModelCtrl.$setViewValue(date);
                                });
                            }
                        });
                    });
                }
            }
        });

Sebastian Gärtner · Accepted Answer · 2013-12-10 16:43:44Z

1

How do you thing the "min" value should led to some changes?

Your directive doesn't read this value, does it?

You can access it via attrs.min in your link function.

Have you got some documentation for what you are doing. I can't find something, that looks like your code.

Oh - you are not using Angular UI Bootstrap Datepicker but jQuery UI Datepicker.

So you have to set this value: http://api.jqueryui.com/datepicker/#option-minDate

...
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date
...

Just like: http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview

edited Dec 10, 2013 at 16:43

answered Dec 10, 2013 at 0:13

Sebastian Gärtner

1245 bronze badges

2 Comments

BillF Over a year ago

thanks for the reply. I've tried adding the attrs.min, but it doesn't seem to work either. I've updated the original post with changes you suggested (please let me know if I missed something). Also, the directive was created from this blog: abequar.net/jquery-ui-datepicker-with-angularjs

Sebastian Gärtner Over a year ago

Just put the 'minDate' on the same level als 'showOn', 'dateFormat' Plunkr forked of the one in your link: plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview

Collectives™ on Stack Overflow

How to dynamically set properties for AngularJS jQueryUI datepicker directive

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest