在AngularJS指令上顯示和存儲不同的日期格式

Question

我有一個指令，用於在日期輸入中顯示日期選擇器。它運作良好，當我使用此日期格式：

YY-MM-DD

（我存儲在MySQL該日）。問題是，我需要在不同的格式顯示日期

DD-MM-YY

不過，這並不與MySQL（它存儲像這樣發揮出色：0000-00 -00）。

這是我使用的指令：

.directive('jqdatepicker', function() { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      link: function (scope, element, attrs, ngModelCtrl) { 
       element.datepicker({ 
        dateFormat: 'dd-mm-yy', 
        changeMonth: true, 
        changeYear: true, 
        onClose: function (date) { 
         scope.date = date; 
         scope.$apply(); 
        } 
       }); 
      } 
     }; 
    }); 

問：是否有使用日期格式展示給用戶的方式，另一個實際使用它在我的模型？

Answer 1

我會推薦使用模塊：angular-moment。有了這個模塊，您將能夠以類似於以下內容的方式處理您的情況。您需要做的是爲您和您的用戶提供兩個日期變量。

moment($scope.date).format('YYYY-MM-DD'); 

角V1：https://github.com/urish/angular-moment

角2：https://github.com/urish/angular2-moment

Answer 2

你爲什麼不使用過濾器呢？讓我告訴你：

它應用在你的控制器是這樣的：

$scope.selectedDate = $filter('date')(new Date($scope.dateFilter), 'yyyy-MM-dd'); 

或者直接在這樣的視圖中使用它，並注意不同的格式：

Here are the built-in localize formats: 

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM --> 
{{ today | date:'short' }} <!-- 8/9/13 12:09 PM --> 
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> 
{{ today | date:'longDate' }} <!-- August 09, 2013 --> 
{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 --> 
{{ today | date:'shortDate' }} <!-- 8/9/13 --> 
{{ today | date:'mediumTime' }} <!-- 12:09:02 PM --> 
{{ today | date:'shortTime' }} <!-- 12:09 PM --> 

The date formatter also enables us to customize your date format to our own liking. We can combine 
and chain together these format options to create one single date format, as well: 

Year Formatting 

Four-digit year: {{ today | date:'yyyy' }} <!-- 2013 --> 
Two-digit padded year: {{ today | date:'yy' }} <!-- 13 --> 
One-digit year: {{ today | date:'y' }} <!-- 2013 --> 

Month Formatting 

Month in year: {{ today | date:'MMMM' }} <!-- August --> 
Short month in year: {{ today | date:'MMM' }} <!-- Aug --> 
Padded month in year: {{ today | date:'MM' }} <!-- 08 --> 
Month in year: {{ today | date:'M' }} <!-- 8 --> 

Day Formatting 

Padded day in month: {{ today | date:'dd' }} <!-- 09 --> 
Day in month: {{ today | date:'d' }} <!-- 9 --> 
Day in week: {{ today | date:'EEEE' }} <!-- Thursday --> 
Short day in week: {{ today | date:'EEE' }} <!-- Thu --> 

Hour Formatting 

Padded hour in day: {{ today | date:'HH' }} <!-- 00 --> 
Hour in day: {{ today | date:'H' }} <!-- 0 --> 
Padded hour in am/pm: {{ today | date:'hh' }} <!-- 12 --> 
Hour in am/pm: {{ today | date:'h' }} <!-- 12 --> 

Minute Formatting 

Padded minute in hour: {{ today | date:'mm' }} <!-- 09 --> 
Minute in hour: {{ today | date:'m' }} <!-- 9 --> 

Second Formatting 

Padded second in minute: {{ today | date:'ss' }} <!-- 02 --> 
Second in minute: {{ today | date:'s' }} <!-- 2 --> 
Padded millisecond in second: {{ today | date:'.sss' }} <!-- .995 --> 

String Formatting 

am/pm character: {{ today | date:'a' }} <!-- AM --> 
4-digit representation of time zone offset: {{ today | date:'Z' }} <!-- -0700 --> 

Some examples of custom date formatting: 
{{ today | date:'MMM d, y' }} <!-- Aug 09, 2013 --> 
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8 --> 
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 --> 

Answer 3

我想另一種方法（在你的情況下可能會更好）是在同一個jqdatepicker指令中添加解析器和格式函數到ngmodelcontroller。這裏是代碼

ngModelCtrl.$parsers.push(function (value) { 
    return moment(value, "DD-MM-YYYY").format('YYYY-MM-DD'); 
}); 

ngModelCtrl.$formatters.push(function (value) { 
    return moment(value, 'YYYY-MM-DD').format("DD-MM-YYYY"); 
}); 

這裏是爲你演示的解決方案，演示解決方案https://plnkr.co/edit/7Un2EvTtdigkvo0JJezS?p=preview。