How to convert Asp.Net Core DateTime to Angular Date using Constructor?

Question

I am using Angular 8 with Asp.Net Core. The current problem I'm having is that I can not display the dates within a Modal using [(ngModel)] and a date pipe.

What I would like to do is to convert the Asp.Net Core DateTime into an Angular Date format in the constructor.

Here is my code. Created, StartDate and EndDate are all Date.

export class Content {
    Id: string;
    CompanyId: string;
    Created: Date; 
    Name: string;
    Url: string;
    Instructions: string;
    Tags: string; 
    StartDate: Date; 
    EndDate: Date;
    Deleted: Boolean;
    Pause: Boolean;
    Published: Boolean;

    constructor(contentResponse: any) {
        this.Id = contentResponse.id;
        this.CompanyId = contentResponse.companyId;
        this.Created = contentResponse.Created;
        this.Name = contentResponse.name;
        this.Url = contentResponse.url;
        this.Instructions = contentResponse.instructions;
        this.Tags = contentResponse.tags;
        this.StartDate = contentResponse.startDate;
        this.EndDate = contentResponse.endDate;
        this.Deleted = contentResponse.deleted;
        this.Pause = contentResponse.pause;
        this.Published = contentResponse.published;
    }

 }

From console.log, I can see the following Date formats.

JSON from API

created: "2019-08-03T21:26:51.7981863"

endDate: "2020-12-31T00:00:00"

startDate: "2019-07-15T00:00:00"

After conversion using current constructor

Created: undefined

EndDate: "2020-12-31T00:00:00"

StartDate: "2019-07-15T00:00:00"

Does anyone know how to convert this in the constructor so Angular can display this information and work with it?

Any help is much appreciated. Thanks!

Try this in everyDate ---> ```new Date("2019-08-03T21:26:51.7981863");``` — sagat, Aug 06 '19 at 16:47
@sagat Thanks! I tried this exact line on EndDate to see what would happen. Here is the result. EndDate: Sat Aug 03 2019 21:26:51 GMT-0500 (Central Daylight Time) {} I see a __proto__: Object as well with all kinds of nested objects. It does not display here [(ngModel)]="formModel.EndDate". — Dumber_Texan2, Aug 06 '19 at 16:56

score -1 · Answer 1 · answered Aug 06 '19 at 16:49

-1

Try Moment JS in you angular app. I am using it with many angular projects with asp.net and asp.net core backend with no problem at all. If you want to use 'native' angular date pipe the only issue that you can found is localizing your data. But you can use moment also for this kind of things.

Hope it's help.

answered Aug 06 '19 at 16:49

jspassov

791
7
11

Thanks! I was thinking something like this would work, but it does not. this.EndDate = new Date(moment(contentResponse.endDate).format('YYYY-MM-DD')); Any idea how to use moment in my specific case? – Dumber_Texan2 Aug 06 '19 at 17:51
I would suggest date fns, as it is a lot lighter than moment and treeshakeable --> https://date-fns.org/v2.0.0-beta.4/docs/parse. For ur question here look at this question --> https://stackoverflow.com/questions/22184747/parse-string-to-date-with-moment-js. In short leave out the new Date statement, only moment(yourDateString).format(yourFormat) – sagat Aug 06 '19 at 19:36
I am not sure why you are trying to set this.EndDate fo Date. Why not just using a moment().format() and you get a string ready to display on your view. If you want to store in your class you have two options: 1-st to declare StartDate and EndDate as Moment instead of Date, or 2-nd leave as it is, and convetr moment(contentResponse.endDate).toDate without "format" - than you can format date in your view with pipe or again passing to moment(EndDate).format('whatever-you-want'). – jspassov Aug 15 '19 at 13:54

How to convert Asp.Net Core DateTime to Angular Date using Constructor?

1 Answers1