אנגולר 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). תודה.
-
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
(2018-04-03T21:00:00.000Z)
לדעתי input date לא אמור להתנגד לפורמט כזה
(2018-04-03T21:00:00.000Z)או לפחות ככה:
new Date('2018-04-03T21:00:00.000Z')
-
new Date("2018-04-03T21:00:00.000Z")
זה תקין לגמרי.
-
כבר פרסמתי פה קוד של דיירקטיב שעושה בדיוק את זה, קח משם.
-
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(); } }); -
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
@zvizvi איפה זה אמור להיות? בתוך Directive?
במקום 2 השורות האלה:
ngModelCtrl.$formatters.length = 0; ngModelCtrl.$parsers.length = 0; -
@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השיב למנצפך ב 10 באפר׳ 2018, 11:02 נערך לאחרונה על ידי zvizvi 4 באוק׳ 2018, 11:08
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
@dovid אמר באנגולר 1 - Direcrive להמרת תאריך:
משמה
לא מצאתי את האשכול הקודם
@zvizvi ניסיתי לעשות בלי להשתמש ב moment. בינתיים לא עובד.אתה חייב לסנן החוצה ערכים שאינם תאריך, כי כשתעשה new date לערך שהוא לא תאריך - תקבל שגיאה.
-
שים את זה בHTML ויהיה לך moment.
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js">
-
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
@dovid אמר באנגולר 1 - Direcrive להמרת תאריך:
משמה
לא מצאתי את האשכול הקודם
כשיהיה לי לך יותר כח אני יידבק ממך ויהיה לי כח לענות
-
-
צודק, כל זה מיועד עבור input text.
ועדיין אני לא מבין למה בינדינג רגיל לתאריך שקיבלת מהשרת לא עובד. -
@zvizvi תראה פה:
http://plnkr.co/edit/b2AwltcRoc21hPZp8L1n
אני מנסה להציב סטרינג של תאריך בתוך input type=date.
זה לא עובד. אפילו אם עושים ל date ToString זה לא עובד. -
@zvizvi אמר באנגולר 1 - Direcrive להמרת תאריך:
צודק, כל זה מיועד עבור input text.
ועדיין אני לא מבין למה בינדינג רגיל לתאריך שקיבלת מהשרת לא עובד.@dovid אמר בעיצוב date ב JS + אנגולר:
הבעיה זה לא הפורמט. הבעיה היא שזה מגיע מהשרת כטקסט, וזה תמיד ככה.
שרת תמיד שולח טקסט, ואפילו אם זה פורמט JSON שהופך לאובייקטים, עדייi אין בJSON מושג ששמו תאריך.
לכן אתה מוכרח להשתמש בפונקציה, שבל זה לא יכול להיעשות בng-model שכן זה בינדינג דו כיווני - מה יקרה כשהמשתמש ישנה את הערך? אתה חייב להחזיק עותק של המשתנה שהוא בקוד יהיה מסוג תאריך.
אם אתה מוותר על הtype="data" אתה פותר את כל הבעיה, אבל כנראה תרצה להשתמש עם תוסף שיציג בורר תאריכים אחר מהמובנה של כרום (שמצריך type="date"). -
https://plnkr.co/edit/jx78Wu5GsFrmFKVTJZy0
אבל אני חושב שהכי טוב להשתמש עם בורר תאריכים של בוטסטראפ וכדומה. -
@dovid רציתי לעשות readonly
אז עשיתי כאן:
https://plnkr.co/edit/H9kkQCFIWHbk07WNfLG2?p=preview
שיכתבו באטריביוט של האלמנט readonly=true
ובטמפלט השתמשתי ב ng-readonly.
השאלה אם אפשר לעשות את זה כמו ב Input רגיל. שרק כותבים readonly.
בעצם השאלה שלי היא איך אפשר לכתוב אלמנט בלי =. זה נראה לי דירקטיב בתוך דיירקטיב. לא?
דבר נוסף, אם אני עושה 2 דירקטיבים כאלו (כלומר אלמנט דירקטיב) הם לא משפיעים אחד על השני מיידית. מה הסיבה? -
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
@dovid רציתי לעשות readonly
אז עשיתי כאן:
https://plnkr.co/edit/H9kkQCFIWHbk07WNfLG2?p=preview
שיכתבו באטריביוט של האלמנט readonly=true
ובטמפלט השתמשתי ב ng-readonly.
השאלה אם אפשר לעשות את זה כמו ב Input רגיל. שרק כותבים readonly.
בעצם השאלה שלי היא איך אפשר לכתוב אלמנט בלי =. זה נראה לי דירקטיב בתוך דיירקטיב. לא?
דבר נוסף, אם אני עושה 2 דירקטיבים כאלו (כלומר אלמנט דירקטיב) הם לא משפיעים אחד על השני מיידית. מה הסיבה?למה לעשות לזה דירקטיב שלם? למה לא תרשום בHTML :
readonly="{{true || false}}"
-
@zvizvi אמר באנגולר 1 - Direcrive להמרת תאריך:
readonly="{{true || false}}"
איפה בדיוק לכתוב? לא הצלחתי.
-
zvizviהשיב למנצפך ב 10 באפר׳ 2018, 16:20 נערך לאחרונה על ידי zvizvi 4 באוק׳ 2018, 16:20
@מנצפך אמר באנגולר 1 - Direcrive להמרת תאריך:
@zvizvi אמר באנגולר 1 - Direcrive להמרת תאריך:
readonly="{{true || false}}"
איפה בדיוק לכתוב? לא הצלחתי.
<input type="date" ng-model="chotamProfile.request_closedRoomExp" readonly="{{true}}" date-format/>
פוסט 1 מתוך 32