jQuery ui datepicker directive for angular with typescript

11 במאי 2016

תגובה אחת

לאחרונה כתבתי מערכת מבוססת אנגולר עם typescript, והייתי צריך להטמיע jquery ui datepicker, כדי לעשות זאת כתבתי directive קטן שיעזור לבצע את העבודה.

אני אציג כאן את שני הגרסאות של הקוד, אחד באנגולר רגיל והשני בעטיפה ל – typescript

 

אנגולר

Code Snippet
function datePickerUi() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                isRTL: true,
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });
                }
            });

            ngModelCtrl.$render = function () {
                element.datepicker('setDate', ngModelCtrl.$modelValue);
            };

            element.datepicker('option', $.datepicker.regional['he']);
        }
    }
}

החלק הראשון במתודת ה – link, מטפל ביצירת האלמנט ל – datepicker, כאשר בזמן בחירת תאריך (onselect) אנחנו מעדכנים את המודל, ברישום למתודת ה – render, אנחנו דואגים לכיוון ההפוך, בזמן שינוי של המודל, אנחנו דואגים לעדכן את ה – UI.

 

גרסת typescript.

Code Snippet
module Infrastructure.Directives {
    export class DatePickerUI implements ng.IDirective {

        restrict = 'A';
        require = 'ngModel';

        link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModelCtrl: ng.INgModelController) => {

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

            ngModelCtrl.$render = function () {
                element.datepicker('setDate', ngModelCtrl.$modelValue);
            };

            element.datepicker('option', $.datepicker.regional['he']);
        }

        static Factory(): ng.IDirectiveFactory {
            const directive = () => new DatePickerUI();
            directive.$inject = [];
            return directive;
        }
    }

    angular.module('infrastructure')
        .directive("datePickerUi", DatePickerUI.Factory());
}

הוסף תגובה
facebook linkedin twitter email

להגיב על נועה לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת

  1. נועה28 בספטמבר 2016 ב 10:38

    כשמשנים את הקלט ידני ולא על ידי לחיצה בלוח השנה של ה picker
    ה ngModel מכיל string ולא תאריך דבר שמקשה כשיש שני שדות של picker וצריך להשוות ביניהם (ואחד תאריך והשני לא )

    איך אפשר לפתור את זה?

    הגב