AngularJSディレクティブに異なる日付形式を表示して保存する

Question

日付入力に日付ピッカーを表示するための指示があります。

YY-MM-DD

（私はMySQLの上でその日を保存）：私はこの日付フォーマットを使用するとき、それはうまく動作します。 0000から00：問題は、（それがこのようにそれを格納し、私は別のフォーマット

DD-MM-YY

に日付を表​​示する必要がある。しかし、それは、MySQLとうまく再生されないということです-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(); 
        } 
       }); 
      } 
     }; 
    }); 

QUESTION：実際に私のモデルにそれを使用するユーザーにそれを表示するには日付形式を使用する方法、もう一つはあり

これは私が使用しているディレクティブはありますか？

Answer 1

モジュール：角モーメントの使用をお勧めします。このモジュールを使用すると、あなたとあなたのユーザーのための2つの日付変数を持つ必要があります、あなたの状況を同様に処理することができます。

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のソリューションを示すために作成されたプランナーがあります。