将 modelValue 设置为与 Angular 指令中的 viewValue 不同的日期格式答案

【问题标题】：Set modelValue as a different date format to the viewValue in Angular directive将 modelValue 设置为与 Angular 指令中的 viewValue 不同的日期格式
【发布时间】：2016-12-14 06:54:39
【问题描述】：

我在表单中有一个日期选择器。我想为视图设置一种格式，但将不同的格式应用于模型值（发送到 API）。简单来说，我希望用户看到“dd/mm/yyyy”，但需要以 ISO 格式发送日期。

这是我的指令：

app.directive('standardDatepicker', function($timeout) {
return{
    restrict: 'A',  
    require : '^ngModel',
    link: function(scope, element, attrs, ngModel, ngModelCtrl){
            element.datepicker({
                format: "dd/mm/yyyy",
                autoclose: true,
            }).on('changeDate', function(e) {
                ngModel.$viewValue = e.date;    
                ngModel.$render();
            });
    }
  }
});

有没有简单的方法来实现这一点？

【问题讨论】：

你试过使用隐藏字段吗？？
我确实考虑过，但是当您将它们放入 ng-repeats 中时，它们开始变得复杂。想看看有没有简单的指令解决方案。

标签： angularjs

【解决方案1】：

我最终使用 $parsers 如下。感谢所有的贡献。

app.directive('standardDatepicker', function($timeout, dateFilter) {
return{
    restrict: 'A',  
    require : 'ngModel',
    link: function(scope, element, attrs, ngModel, ngModelCtrl){
            element.datepicker({
                format: "dd/mm/yyyy",
                autoclose: true,
            }).on('changeDate', function(e) {
                ngModel.$parsers.push(function(viewValue){
                    var isoDate = moment(e.date).format('YYYY-MM-DD');
                    return isoDate;
                });
            });
       }
    }
});

【讨论】：

【解决方案2】：

有 $parsers 和 $formatters 来转换一个值。访问https://stackoverflow.com/a/22843592/2224277了解更多信息

【讨论】：

【解决方案3】：

你应该使用$formatters and $parsers

function standardDatepicker() {
    return {
        require: 'ngModel',
        link: function ($scope, $elem, $attrs, $ctrl) {

            var ngModelCtrl = $ctrl;

            ngModelCtrl.$formatters.unshift(function (value) {
                return value.format('YYYY');
            });

            ngModelCtrl.$parsers.unshift(function (value) {
                return value.format('YYYY-MM-DD');
            });

        }
    }
}

【讨论】：