עיצוב date ב JS + אנגולר

מנצפך

אני מקבל מהשרת זמן בפורמט כזה:
2018-03-07T22:00:00.000Z

כשאני מנסה להכניס אותו לUI ע"י אנגולר (משהו כזה:
<input type="date" ng-model="Exp" readonly>
אני מקבל שגיאה:
angular.js:14800 Error: [ngModel:datefmt] Expected 2018-03-07T22:00:00.000Z to be a date
וזה בגלל הפורמט של התאריך.
אני יכול פשוט לשנות את התאריך בקוד כך:

 let d = new Date($scope.Exp);
        $scope.Exp=d;

זה עובד פרפקט.
השאלה היא האם אפשר לפתור את זה יותר אלגנטי ברמת הUI של אנגולר. ולא בקוד של הסקופ. כי זה יצריך לעשות כך בכל סקופ שמציג תאריכים.
תודה.

בנוסף, ניסיתי לעשות פונקציה בסקופ, עם הלודיקה שנכתבה כאן למעלה נקרא לה dateFormatted, ולקרוא לה מהUI. כך:
(ng-model="dateFormatted(Exp"
אך הבעיה שם היתה שהפונקציה עצמה לא הצליחה להמיר את הנתונים ל Date.
האם הייתי מובן? תודה!

מנצפך

עכשיו אני מבין שמה שניסתי לעשות בכל מקרה לא היה עובד בגלל שאי אפשר לחבר (בצורה כזאת) את המודל עם הפונקציה.

dovid

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

מנצפך

תודה @dovid על ההסבר מדוע אי אפשר לעשות ע"י ng-model. עכשיו אני מבין.

ראיתי שיש אפשרות ע"י ng-value (במקום ng-model) עם settet ו - getter. אבל לא נכנסתי לזה.

אני באמת ארצה להשתמש בקונטרול אחר בשביל התאריך. עם תמיכה בתאריך עברי (זה די קריטי כאן). יש משהו מומלץ? (עם תמיכה נוחה באנגולר כמובן ) משהו שישלב גם לועזי. או באותו פקד, או ע"י בינדינג.

zvizvi

דיירקטיב שכתבתי עבור הבעיה הזאת

import angular from 'angular';
import moment from 'moment';

let inputDateModule = angular.module('inputDate', [])
  .directive('inputDate', inputDateDirective)
  .name;

function inputDateDirective ($window) {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) {
      var vm = ctrl;
      if (!vm) {
        return;
      }

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

inputDateDirective.$inject = ['$window'];
export default inputDateModule;

<input type="text"  input-date />

וצריך להתקין moment.

מנצפך

@zvizvi תודה.
כל הקוד צריך להיכנס לאותו קובץ?
ואיפה ההכנסה של הדיירקטיב לתוך המודל אנגולר שלי? (נניח שהמודל שלי נקרא myApp)

zvizvi

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

@zvizvi תודה.
כל הקוד צריך להיכנס לאותו קובץ?
ואיפה ההכנסה של הדיירקטיב לתוך המודל אנגולר שלי? (נניח שהמודל שלי נקרא myApp)

הקוד הזה כתוב בES6, אני מניח שתרצה להמיר אותו לjavascript רגיל.

לתוך המודל אתה מכניס 'inputDate'.

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

עיצוב date ב JS + אנגולר