在 AngularJS 指令上显示和存储不同的日期格式答案

【问题标题】：Show and store different date formats on AngularJS Directive在 AngularJS 指令上显示和存储不同的日期格式
【发布时间】：2016-12-07 04:27:43
【问题描述】：

我有一个指令用于在日期输入上显示日期选择器。当我使用这种日期格式时效果很好：

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();
                    }
                });
            }
        };
    });

问题：有没有办法使用日期格式向用户显示它并在我的模型上实际使用它？

【问题讨论】：

只要您在模型中有一个日期对象，您就可以使用内置的 angularjs date filter 以您喜欢的任何格式显示它。您可以使用相同的过滤器来格式化控制器中的日期，然后再将其发布到将其保存到数据库的后端。
你可以使用日期过滤器

标签： mysql angularjs laravel date

【解决方案1】：

你为什么不为此使用过滤器？让我告诉你：

像这样在你的控制器中应用它：

$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 -->

【讨论】：

【解决方案2】：

我建议使用模块：angular-moment。使用此模块，您将能够处理类似于以下内容的情况。您需要做的就是为您和您的用户设置两个日期变量。

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

Angular v1：https://github.com/urish/angular-moment

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

【讨论】：

【解决方案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");
});

这是为您创建的用于演示解决方案的 plunker https://plnkr.co/edit/7Un2EvTtdigkvo0JJezS?p=preview。

【讨论】：