אנגולר 1 - Direcrive להמרת תאריך

מנצפך

יש לי בעיה שכבר נדונה בעבר.
אני מקבל מהשרת תאריך בפורמט מסויים.
(2018-04-03T21:00:00.000Z)
אני רוצה לעשות בינדינג לתוך אלמנט input מסוג date.
הוא כמובן זורק שגיאה שהוא מצפה לקבל תאריך.
אני יכול לעשות המרה בסקופ. אבל רציתי להשתמש ב directive.
מצאתי משהו:

app.directive('dateFormat', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
        //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
        //Reset default angular formatters/parsers     
        ngModelCtrl.$formatters.length = 0;
        ngModelCtrl.$parsers.length = 0;
    }
};

וב HTML כך:

   <input type="date" ng-model="chotamProfile.request_closedRoomExp"  date-format/>

זה לא עובד. אין לי ניסיון ב Directive. מישהו יכול לעזור (הרעיון הוא שאני רוצה ליצור Durective על אלמנט input type=date). תודה.

zvizvi

@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:

(2018-04-03T21:00:00.000Z)

לדעתי input date לא אמור להתנגד לפורמט כזה
(2018-04-03T21:00:00.000Z)

או לפחות ככה:

new Date('2018-04-03T21:00:00.000Z')

מנצפך

@zvizvi הדפדפן שלי מתנגד... מה אעשה....

magicode

new Date("2018-04-03T21:00:00.000Z")

זה תקין לגמרי.

מנצפך

@magicode נכון. כך עשיתי את ההמרה בסקופ. אבל הinput לא מקבל אותו. לפחות לא על ידי אנגולר. אנגולר מזהה שזה לא תאריך.

zvizvi

כבר פרסמתי פה קוד של דיירקטיב שעושה בדיוק את זה, קח משם.

zvizvi

      ngModelCtrl.$formatters.unshift(function (a) {
        if (ngModelCtrl.$modelValue) {
          var date = moment(ngModelCtrl.$modelValue);
          if (!date._isValid) {
            return '';
          }
          return date.format('DD/MM/YYYY');
        }
      });

      ngModelCtrl.$parsers.unshift(function (viewValue) {
        if (viewValue && moment(viewValue, 'DD/MM/YYYY')._isValid) {
          return moment(viewValue, 'DD/MM/YYYY').format();
        }
      });

מנצפך

@zvizvi איפה זה אמור להיות? בתוך Directive? נא לא להתקמצן...

zvizvi

@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:

@zvizvi איפה זה אמור להיות? בתוך Directive?

במקום 2 השורות האלה:

    ngModelCtrl.$formatters.length = 0;
    ngModelCtrl.$parsers.length = 0;

dovid

פוסט זה נמחק!

מנצפך

@dovid אמר באנגולר 1 - Direcrive להמרת תאריך:

משמה

לא מצאתי את האשכול הקודם
@zvizvi ניסיתי לעשות בלי להשתמש ב moment. בינתיים לא עובד.

 app.directive('dateFormat', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (a) {
            if (ngModelCtrl.$modelValue) {
             // var date = moment(ngModelCtrl.$modelValue);
             // if (!date._isValid) {
              //  return '';
             // }
             return new Date(ngModelCtrl.$modelValue);
              //return date.format('DD/MM/YYYY');
            }
          });
    
          ngModelCtrl.$parsers.unshift(function (viewValue) {
            return new Date(viewValue);
         /*   if (viewValue && moment(viewValue, 'DD/MM/YYYY')._isValid) {
              return moment(viewValue, 'DD/MM/YYYY').format();
            }*/
          });
    }
};

מה לא טוב?

zvizvi

@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:

@dovid אמר באנגולר 1 - Direcrive להמרת תאריך:

משמה

לא מצאתי את האשכול הקודם
@zvizvi ניסיתי לעשות בלי להשתמש ב moment. בינתיים לא עובד.

אתה חייב לסנן החוצה ערכים שאינם תאריך, כי כשתעשה new date לערך שהוא לא תאריך - תקבל שגיאה.

zvizvi

שים את זה בHTML ויהיה לך moment.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js">

מנצפך

@zvizvi מסכים איתך עקרונית. כרגע זה לא קריטי. קודם שיעבוד במה שיש תאריך.
משום מה הפונקציות unshift לא מופעלת בכלל. אני שם בתוכן console.log והוא לא כותב.
אני מריח שאני מפספס כאן משהו.

dovid

@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:

@dovid אמר באנגולר 1 - Direcrive להמרת תאריך:

משמה

לא מצאתי את האשכול הקודם

כשיהיה לי לך יותר כח אני יידבק ממך ויהיה לי כח לענות

dovid

זה באמת בעיה קשה שהחיפוש בפורום לא עובד, אבל באנגלית הוא עובד.

zvizvi

@מנצפך רשמת את הדיירקטיב בmodule? מכיר את המושג?

מנצפך

@zvizvi נראה לי שכן. הפונקציה link עובדת היטב. (ניסיתי console.log).
אולי תלוי בגירסה (169)

מנצפך

@zvizvi הבנתי מה הבעיה. בפתרון שלך הtype של ה input הוא text.
הדגשתי כאן שאני צריך type=date.
לזה זה לא מועיל (בינתיים).
אני לא כ"כ יודע איך זה עובד מבחינת אנגולר, משום מה הוא לא מריץ את ה unshift.
תודה @dovid בזכותך מצאתי את הפוסט הנ"ל.

zvizvi

צודק, כל זה מיועד עבור input text.
ועדיין אני לא מבין למה בינדינג רגיל לתאריך שקיבלת מהשרת לא עובד.

תחומים - פורום חרדי מקצועי

אנגולר 1 - Direcrive להמרת תאריך