angularjs: parsing date input

Question

I need a directive which will parse user input to date and validate it. So I wrote the following:

myDirectives.directive('myDate', function($filter) {
    'use strict';
    return {
        require:'ngModel',
        restrict:'A',
        link:function (scope, elem, attrs, ctrl) {
            var dateFormat = attrs.myDate ? attrs.myDate : 'shortDate';

            ctrl.$formatters.unshift(function(modelValue) {
                return $filter('date')(modelValue, dateFormat);
            });
            ctrl.$parsers.unshift(function(viewValue) {
                var date = new Date(viewValue);

                if (isNaN(date)) {
                    ctrl.$setValidity('date', false);
                    return undefined;
                } else {
                    var dateString = $filter('date')(date, dateFormat);
                    if (dateString !== viewValue) {
                        ctrl.$setViewValue(dateString);
                    }
                    ctrl.$setValidity('date', true);
                    return date;
                }
            });
        }
    };
});

Parsing need to occur only after when input loses focus, so I use another directive, which I found here. The problem is

ctrl.$setViewValue(dateString);

won't work, because as indicated in angularjs documentation, setViewValue() must be called from within a DOM event handler. What should I do to reflect back parsing result?

synergetic · Accepted Answer · 2013-09-09 06:03:28Z

2

Instead of

ctrl.$setViewValue(dateString);

I needed to write

elem.val(dateString);

and the problem was solved. So, my directive now looks like below:

myDirectives.directive('myDate', function ($filter) {
    'use strict';
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {
            var dateFormat = attrs.myDate ? attrs.myDate : 'shortDate';
            ctrl.$formatters.unshift(function (modelValue) {
                return (modelValue) ? $filter('date')(modelValue, dateFormat) : '';
            });
            ctrl.$parsers.unshift(function (viewValue) {
                var date = new Date(viewValue);
                if (isNaN(date)) {
                    ctrl.$setValidity('date', false);
                    return undefined;
                } else {
                    var dateString = $filter('date')(date, dateFormat);
                    if (dateString !== viewValue) {
                        elem.val(dateString);
                    }
                    ctrl.$setValidity('date', true);
                    return date;
                }
            });
            elem.unbind('input').unbind('keydown').unbind('change');
            elem.bind('blur', function () {
                scope.$apply(function () {
                    ctrl.$setViewValue(elem.val()); //this method name is misleading; 
                                                    //it actually sets model value?!
                });
            });
        }
    };
});

Note, that I incorporated the code from another directive which was responsible for pushing view value to model, when focus is lost.

edited Sep 9, 2013 at 6:03

answered Sep 9, 2013 at 5:57

synergetic

8,09611 gold badges68 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robba Over a year ago

Just to comment on your comment in the last row, the $setViewValue() function does indeed do that: setting the view value, after which it proceeds to call all the registered $parsers in the pipeline to end up with the model value which is then set in the model linked by the ngModel attribute.

Dzulqarnain Nasir · Accepted Answer · 2014-02-19 21:48:09Z

2

I've created a date parser that converts string to Date objects. You can also provide date formats you're using, as well as your date locale. It returns a Date object, valid or otherwise depending on the input.

There's also a directive that implements this parser so you can use it on an input field, for example.

https://github.com/dnasir/angular-dateParser

answered Feb 19, 2014 at 21:48

Dzulqarnain Nasir

2,3001 gold badge20 silver badges17 bronze badges

Comments

TheSharpieOne · Accepted Answer · 2013-09-09 11:35:43Z

0

This should work:

var setter = $parse('ngModel').assign;
setter($scope,valueToSet);
$scope.$apply() // This may be needed depending on where its done.

Refenece: http://docs.angularjs.org/api/ng.$parse

edited Sep 9, 2013 at 11:35

answered Sep 6, 2013 at 12:18

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

1 Comment

synergetic Over a year ago

There's a typo: $prase -> $parse. Even then, it doesn't solve the problem.

Giancarlo Paoli · Accepted Answer · 2016-03-20 01:16:34Z

-1

on html:

<input class="form-control""
type="date"
string-to-date
ng-model="val.VAL">

On Controller create a directive

.directive('stringToDate', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
          return new Date(value);
        });
        ngModel.$formatters.push(function(value) {
          var fechaactual = new Date(value);
          return fechaactual;
        });
      }
    };
  })

note that the directive call stringToDate and you have to call it as string-to-date in the html. Dont not why :)

answered Mar 20, 2016 at 1:16

Giancarlo Paoli

11 bronze badge

Collectives™ on Stack Overflow

angularjs: parsing date input

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related