Angular: How to covert a date string in "dd/MM/yyyy" to a date object

Question

I need to capture date data in dd/MM/yyyy format and need to send it to the API as Date object. I am using the following directive:

angular.module('tmyapp').directive('formattedDate', function (dateFilter) {
    return {
        require: 'ngModel',
        scope: {
            format: "="
        },
        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format
                return dateFilter(data, scope.format); //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return dateFilter(data, scope.format); //converted
            });
        }
    }
});
//use <input type="text" formatted-date format="'dd/MM/yyyy'" />

It is working in showing the Date Object to dd/MM/yyyy but fails to convert the data in dd/MM/yyyy format to Date object.

Can someone help?

Right, but simply passing the data in string dd/MM/yyyy format to the date method doesn't work. I am looking for a way to do this. — Kangkan
– Kangkan, Commented Jul 10, 2016 at 5:34

Varvarigos Emmanouil · Accepted Answer · 2016-07-10 07:02:22Z

1

You have to parse date String in parser like this:

angular.module('tmyapp').directive('formattedDate', function (dateFilter) {
    return {
        require: 'ngModel',
        scope: {
            format: "="
        },
        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format
                dateArray = data.split("/");
                var date = new Date(dateArray[2] + "-" + dateArray[1] + "-" + dateArray[0])
                return date; //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return dateFilter(data, scope.format); //converted
            });
        }
    }
});

answered Jul 10, 2016 at 7:02

Varvarigos Emmanouil

7574 silver badges14 bronze badges

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

2 Comments

Kangkan Over a year ago

So, this will make the directive work for this particular format only. And if I need to use other formats, I might have to add additional parsers. Is that right?

Varvarigos Emmanouil Over a year ago

You can make it as conditional as you like based on the format.

Collectives™ on Stack Overflow

Angular: How to covert a date string in "dd/MM/yyyy" to a date object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related