Question

我在表单中有一个日期选择器。我想为视图设置一种格式，但是将不同的格式应用于模型值（发送到API）。简单来说，我希望用户看到＆＃dd / mm / yyyy＆＃39;但需要以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();
            });
    }
  }
});

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

Answer 1

您应该使用$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');
            });

        }
    }
}

Answer 2

有$ parsers和$ formatters来转换值。访问https://stackoverflow.com/a/22843592/2224277了解详情

Answer 3

我最终使用$解析器，如下所示。感谢所有的贡献。

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

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

3 个答案: