Jquery ui datapicker with readonly in Angular

Question

I was trying to use ngReadonly withing directive but my code is not working properly:

app.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {



            $(function(){
                element.datepicker({
                    dateFormat:'mm/dd/yy',
                    onSelect:function (date) {

                            scope.$watch(attrs.ngReadonly, function(value) {

                                console.log(value);
                                scope.$apply(function () {
                                     ngModelCtrl.$setViewValue(value?"":date);
                                });

                        });


                    }
                });
            });
        }
    }
});

My datepicker should work according to check box, the ideal goal would be not to trigger datepicker at all, when the checkbox is unchecked.

THanks

see https://stackoverflow.com/questions/7812063/jquery-datepicker-readonly — wero, Jul 14 '15 at 16:56

score 1 · Accepted Answer · answered Jul 15 '15 at 14:29

Instead of using ng-readonly, I used ng-disabled

<input type="text" jqdatepicker  ng-disabled="!formData.gtdata.ch" ng-model="formData.gtdata.dt1"/>

app.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
                $(function(){
                    element.datepicker({
                        dateFormat:'mm/dd/yy',
                        onSelect:function (date) {
                            scope.$apply(function () {
                                 ngModelCtrl.$setViewValue(date);
                            });

                        }
                    });
                });
        }
    }
});

score 0 · Answer 2 · answered Aug 07 '16 at 03:26

<input type="text" jqdatepicker  ng-readonly ="!formData.gtdata.ch" ng-model="formData.gtdata.dt1"/>

    app.directive('jqdatepicker', function() {
        return {
            restrict: 'A',
            require : 'ngModel',
            link : function (scope, element, attrs, ngModelCtrl) {
                    $(function(){


          //disable datepicker
                if (attrs.ngReadonly || attrs.ngReadonly || attrs.Readonly)                 {
                    var str = attrs.ngReadonly || attrs.Readonly;
                    scope.$watch(str, function (newValue, oldValue) {
                        if (newValue) {
                            element.datepicker("option", "disabled", true);
                        } else {
                            element.datepicker("option", "disabled", false);
                        }
                    }, 0);

                }
                        element.datepicker({
                            dateFormat:'mm/dd/yy',
                            onSelect:function (date) {
                                scope.$apply(function () {
                                     ngModelCtrl.$setViewValue(date);
                                });

                            }
                        });
                    });
            }
        }
    });

score 0 · Answer 3 · answered May 03 '18 at 12:54

Here is what I did for Jquery UI datepicker. The idea is to return false inside datepicker.beforeShow if datepicker ng-readonly is true. HTML

<input type="text" jqdatepicker ng-model="SomeDate " ng-value="SomeDate | date:'dd/MM/yyyy'" ng-readonly="ro"/>

Js

app.directive('jqdatepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                ngReadonly: '=',
            },
            link: function (scope, element, attrs, ctrl) {
                element.datepicker({
                    onSelect: function (date) {
                        ctrl.$setViewValue(date);
                        ctrl.$render();
                        scope.$apply();
                    },
                    beforeShow: function () {
                        var canShow = !scope.ngReadonly;
                        return canShow;
                    },
                });
            }
        };
    });

Jquery ui datapicker with readonly in Angular

3 Answers3