How to display date in need format from database, from iso8601 to type=“date”

Question

Huy everyone! Have a problem with dislpaying date form DB. I have field expiryDate of project there are in DB: Type of DB "date" Example: "2019-12-12" when i get date form in json in angular like this: Image of expiryDate ( https://i.stack.imgur.com/23uhm.png ) iso8601

I'm creating CRUD function - update and i want display previous date that was before i don't know how. image of when i want to display previous date - http://prntscr.com/orrj6d

I tried few examples but they didn't helped

project.ts:

this.dateInForm = new Date(expiryDate.dayOfMonth, expiryDate.monthValue - 1, expiryDate.year);
console.log(this.dateInForm); // => Tue Jun 11 1918 00:00:00 GMT+0202 (Восточная Европа, летнее время)



// expiryDate format is : 
//chronology: {id: "ISO", calendarType: "iso8601"}
//dayOfMonth: 12
//dayOfWeek: "THURSDAY"
//dayOfYear: 346
//era: "CE"
//leapYear: false
//month: "DECEMBER"
//monthValue: 12
//year: 2019

project.html:

<div>
<input type="date" style="font-size: 13px;" formControlName="expiryDate" [(ngModel)]="dateInForm"  class="question" class="form-control" placeholder="expiryDate" required autocomplete="off"/>
<label for="msg"><span></span></label>
</div>
<div *ngIf="updateProjectForm.controls.expiryDate.invalid &&(updateProjectForm.controls.expiryDate.dirty || updateProjectForm.controls.expiryDate.touched)">
<div *ngIf="updateProjectForm.controls.expiryDate.errors?.minDate">
     <p class="err-msg">
       expiryDate is  invalid
     </p>
</div>
 </div>

I don't know how to display date in html type="date" please help)

Answer 1

If you are using the native input elements of type date , there is no need to convert it to a JavaScript Date object. As stated on the documentation , the value attribute accepts

A DOMString representing a date in YYYY-MM-DD format, or empty.

you should be binding the input element to a string value of YYYY-MM-DD format.

On your component.html,

<input type="date" style="font-size: 13px;" [(ngModel)]="dateInForm"  class="question" class="form-control" placeholder="expiryDate" required autocomplete="off"/>

And on your component.ts,

dateInForm: string = '';

// other parts of the code

this.dateInForm = `${expiryDate.year}-${expiryDate. monthValue}-${expiryDate. dayOfMonth}`;

I have created a demo over here .