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

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.
ועדיין אני לא מבין למה בינדינג רגיל לתאריך שקיבלת מהשרת לא עובד.

מנצפך

@zvizvi תראה פה:
http://plnkr.co/edit/b2AwltcRoc21hPZp8L1n
אני מנסה להציב סטרינג של תאריך בתוך input type=date.
זה לא עובד. אפילו אם עושים ל date ToString זה לא עובד.

dovid

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

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

@dovid אמר בעיצוב date ב JS + אנגולר:

הבעיה זה לא הפורמט. הבעיה היא שזה מגיע מהשרת כטקסט, וזה תמיד ככה.
שרת תמיד שולח טקסט, ואפילו אם זה פורמט JSON שהופך לאובייקטים, עדייi אין בJSON מושג ששמו תאריך.
לכן אתה מוכרח להשתמש בפונקציה, שבל זה לא יכול להיעשות בng-model שכן זה בינדינג דו כיווני - מה יקרה כשהמשתמש ישנה את הערך? אתה חייב להחזיק עותק של המשתנה שהוא בקוד יהיה מסוג תאריך.
אם אתה מוותר על הtype="data" אתה פותר את כל הבעיה, אבל כנראה תרצה להשתמש עם תוסף שיציג בורר תאריכים אחר מהמובנה של כרום (שמצריך type="date").

dovid

https://plnkr.co/edit/jx78Wu5GsFrmFKVTJZy0
אבל אני חושב שהכי טוב להשתמש עם בורר תאריכים של בוטסטראפ וכדומה.

מנצפך

@dovid תודה רבה! נראה פשוט וקל.
האמת שאני מתכנן בהמשך להשתמש בבורר אחר, אבל אני לפני שלב העיצוב בכלל, אז רציתי פתרון זמני, ועל הדרך למדתי קצת את עניין ה Directive.

מנצפך

@dovid רציתי לעשות readonly
אז עשיתי כאן:
https://plnkr.co/edit/H9kkQCFIWHbk07WNfLG2?p=preview
שיכתבו באטריביוט של האלמנט readonly=true
ובטמפלט השתמשתי ב ng-readonly.
השאלה אם אפשר לעשות את זה כמו ב Input רגיל. שרק כותבים readonly.
בעצם השאלה שלי היא איך אפשר לכתוב אלמנט בלי =. זה נראה לי דירקטיב בתוך דיירקטיב. לא?
דבר נוסף, אם אני עושה 2 דירקטיבים כאלו (כלומר אלמנט דירקטיב) הם לא משפיעים אחד על השני מיידית. מה הסיבה?

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

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