How to format dateFormat in [ngModel] in angular 2?

Question

How to format date like dd-MM-YYYY in [ngModel] ?

<input type="text" class="displayInfo"  disabled ngDefaultControl [(ngModel)]="WarrentItem.dateOfRegistartion">

use `pipe` in angular, I think that should do the job – Akhil Aravind Jun 18 '19 at 07:34 — Akhil Aravind, Jun 18 '19 at 07:34

score 1 · Answer 1 · answered Jun 18 '19 at 07:35

1

you can use date pipe directly to display the date with particular format

<p> {{WarrentItem.dateOfRegistartion | date: 'dd/MM/YYYY'}} </p>

answered Jun 18 '19 at 07:35

Jatin Devani

194
2
7

score 1 · Answer 2 · answered Jun 18 '19 at 07:39

1

You can use remove () in [ngModel]

<input type="text" class="displayInfo"  disabled ngDefaultControl [ngModel]="dateOfRegistartion | date: 'dd/MM/yyyy'">

https://stackblitz.com/edit/angular-ztqvfy?file=src%2Fapp%2Fapp.component.html

answered Jun 18 '19 at 07:39

Hien Nguyen

24,551
7
52
62

its ok , but i've got today's Date, i dont need that. I need to get a date from mssql in this format. – Jun 18 '19 at 07:41

score 1 · Answer 3 · answered Jun 18 '19 at 07:43

try like this

Method1

<input [ngModel]="startDate | date:'yyyy-MM-dd'" (ngModelChange)="startDate = $event" type="date" name="startDate"/>

Method 2:

Template

<input [ngModel]="humanDate" type="date" name="startDate"/>

Component (TS):

export class App {
  startDate: any;

  constructor() {
    this.startDate = new Date(2005, 1, 4);
  }

  set humanDate(e){
    e = e.split('-');
    let d = new Date(Date.UTC(e[0], e[1]-1, e[2]));
    this.startDate.setFullYear(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
  }

  get humanDate(){
    return this.startDate.toISOString().substring(0, 10);
  }
}

How to format dateFormat in [ngModel] in angular 2?

3 Answers3