[解決済み] ng-modelを使用して日付をフォーマットする方法は？

質問

次のように定義された入力があります。

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

これは、ページの別の場所に表示されるように装備されています。

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

ページが読み込まれると、生年月日は次のようなきれいな書式で表示されます。 Dec 22, 2009 . しかし、私の <input> の中を見ると Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time) と表示されますが、これはJSのレンダリング方法だと思います。 Date オブジェクトを文字列として表示する方法だと思います。

まず、Angularに日付を表示するように指示する方法ですが、これは <input> のように表示させるにはどうしたらよいでしょうか。 12/22/2009 ? を適用することができないようです。 |filters の中に ng-model 属性の中にあります。

次に、日付を編集すると、たとえ元の書式のままであっても、他のテキスト ( <td> の中）には |date フィルタが適用されないようです。突然、入力テキストボックスのフォーマットと一致するように変わってしまいます。どうすれば |date フィルタを適用させるにはどうしたらよいでしょうか？

関連する質問です。

• ディレクティブをonchangeのときだけ起動するようにするにはどうしたらよいでしょうか?
• ディレクティブの引数にアクセスする方法は?

どのように解決するのですか？

フォームのカスタムバリデーションを使用する http://docs.angularjs.org/guide/forms デモ http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

フォーマとパーサを使ったディレクティブと モーメントJS )

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});