asked on

Where / How is the Date value getting formatted by Angular?

I am working with a Mobile app using XAML and WebView. It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:

{{task.PartActualEndDate}}

But what I need help determining is what formatting is being applied to this date value? The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Open in new window

There is a lot of .js code to wade through. How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page. I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that. It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I can tell).

Screenshot of the date values at runtime:

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Angular 2.x and higher

Angular comprises a View (the HTML code we are looking at) and a TypeScript file that contains the controller code

We will need to see more of the code to determine what you are using.

If your source files are all .js - then it is Angular 1.x in which case look for an ng-controller tag that will tell you what controller function is managing the code you are interested in. From there you can see where the data is coming from.

If the source files end in .ts then it is an Angular 2.x or higher app. In which case look in the .ts file for the view and see where the data is being set.

If the value is a date value then it is probably outputting in the default format for the system. If it is a string then it is being set in the controller or the service that supplies the data.

You can try the date pipe as suggested above to re-format the data - but if you are looking to see where the current format comes from you need to look to the component / controller code or the service that supplies the data.

We can be more specific if you post more code and information about the application.

Tom Knowlton

ASKER

leakim971 said:

did you tried, for example : {{task.PartActualEndDate | date:'medium'}}
or a custom one : {{task.PartActualEndDate | date:'MMMM d, y, h:mm:ss'}}

More about the DatePipe here : https://angular.io/api/common/DatePipe

I tried this and it works and I like it!!

I'm going to see if I can convince my manager to make the change. It seems "smart" to do the formatting this way. I mean, we are using Angular anyway, so why not take advantage.

It seems to handle null or empty string values. How robust is it? How can I properly deal with malformed date values which result in NaN?

Julian Hansen

The pipe is purely for formatting - not validating. You should be validating your data before you give it to the view. In your component code you would ensure the date is valid and / or the service that delivers the data to the component.

Tom Knowlton

ASKER

Thank you!