Format model value as date angularjs

Question

I'm improving and automating certain things in an old web app. One of them is the date format. We used to handle these with jquery functions and now we are doing it with angularjs.

For the input we use a directive and it works perfect. The problem occurs when it is not used, the directive is not executed and the value of the model is left without the proper value.

Directive:

app.directive('formatDate', function($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {            
            // format text (model to view)
            modelCtrl.$formatters.push(function(value) {
                if(value !== "" && typeof value !== "undefined" && value !== null){                
                    return value.split("-").reverse().join("/");
                }
            });

            // format text (view to model)
            modelCtrl.$parsers.push(function(value) {
                if(value !== "" && typeof value !== "undefined" && value !== null){                    
                    var date = new Date(value.split("/").reverse().join("-"));
                    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
                    return date;                    
                }
            });
        }
    };
});

Issue:

When you load the value from webservice, for example: "invoice.date" comes from the database with the format "yyyy-mm-dd". It is loaded in the input with format "dd/mm/yyyy" and if the input is edited the model value is a "Date object" thanks to the directive. But if no field is edited, the value remains "yyyy-mm-dd" and that string causes errors. (Note: they use webservices with jpa and I can not change anything in backend)

How to format the value before sending it without doing a manual verification and analyzing the value in each function? Can I use $watch over each of the variables without causing a conflict with the directive or an infinite loop? Angular has some other way to automate this?

Thanks for any help.

It's crazy to have your datepicker directive take a ISO standard string as the formatter input and a JavaScript Date object as the parser output. The ngModelController was not designed for that. Most AngularJS datepickers have two-way binding to a Date object on the model side and have both a string and a GUI on the user interface side. — georgeawg
– georgeawg, Commented Apr 25, 2019 at 23:01
@georgeawg we are not using datepickers at all. Only a text formatter for the input. And yes, that's the problem, I need to establish this date as an object and it can be done in multiple ways. I'm looking for the most suitable solution. I'm thinking of using the Date object as a standard for each date and changing the directive — Grégor González
– Grégor González, Commented Apr 26, 2019 at 3:25

WillTech · Accepted Answer · 2019-04-27 15:07:56Z

1

I have seen this many times, it is quite common and you are using the time because jpa or the database changes the date because Timezone, right?

ok, then it comes from a webserice so it probably comes in json format. You can simply convert to a date object before assigning it to the model value and thus always use this format. Another way is to convert it before sending it and you've already said that's what you want to avoid.

There are many things that can be done. To sum up:

(choose one)

Convert the format upon receipt and before assigning it. either manual, by simple javascript or any other method.
On the reverse, before sending, make the format change.
To avoid doing it manually, look for it with functions or events, if $ watch can be used to detect in which format it comes and change it correctly. So if it is assigned programmatically, it will also work.
There are other methods to filter and elaborate the response but I think it would be too much for this case. As Jorge said, there are some plugins, tools and more that can be added. But I always try to avoid overloading with so many things.

The problem is to try to automate with angularjs, because there are many ways and finding the "right" way is difficult since each project is different and each person has a different way of thinking.

edited Apr 27, 2019 at 15:07

answered Apr 27, 2019 at 14:53

WillTech

686 bronze badges

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

1 Comment

Grégor González Over a year ago

ohh I had already solved it. Yes, although the format "yyyy-mm-dd" is accepted, the timezone was changing the dates to a previous day. That's why I needed to always use a date type object. What I did was a function that will verify the type of data coming from each response, when loading the dates are reviewed and converted to date object. Of course I changed the directive and now it is working without problems.

Collectives™ on Stack Overflow

Format model value as date angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related