Set modelValue as a different date format to the viewValue in Angular directive

Question

I have a datepicker within a form. I would like to set one format for the view but apply a different format to the model value (which is sent to an API). In simple terms I want the user to see 'dd/mm/yyyy' but need the date to be sent in ISO format.

This is my directive:

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

Is there an easy way to achieve this?

I did consider it but starts getting complicated when you have them inside ng-repeats. Wanted to see if there was a simple directive solution. — Matt Price, Aug 08 '16 at 13:54

score 0 · Answer 1 · answered Aug 08 '16 at 14:09

You should use $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');
            });

        }
    }
}

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

There are $parsers and $formatters to convert a value. Visit https://stackoverflow.com/a/22843592/2224277 for more information

edited May 23 '17 at 12:08

Community

1
1

answered Aug 08 '16 at 14:11

Vitalii Baitaliuk

57
7

score 0 · Answer 3 · answered Aug 10 '16 at 10:36

I ended up using the $parsers as follows. Thanks for all the contributions.

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

Set modelValue as a different date format to the viewValue in Angular directive

3 Answers3