如何在 angular 4 中更改 input type="date" 的输出日期格式？

Question

Actually I am working with angular 4 application. I am having a scenario like, I have to send the Date for as dd/mm/yyyy to the server.

I am using property as input type ="date". But this property returns the value like yyyy/mm/dd . so how do I change the output format of the Date.

Students.html

<input type="date" [(ngModel)]="Students.dob" name="Students.dob">

After selecting the date, when I am check with console.log().

Students.components.ts

checkDate() { console.log(Students.dob); }

Finally the output was yyyy/mm/dd. .

Is there any way to overcome this issue? kindly let me know.

Answer 1

You could change the date into dd/mm/yyyy format using DatePipe inside the checkDate() function. like below. And send that date into the server side.

first import the DatePipe into your component

import { DatePipe } from '@angular/common';

then use it like below

  checkDate() {
    const dateSendingToServer = new DatePipe('en-US').transform(this.Students.dob, 'dd/MM/yyyy')
    console.log(dateSendingToServer);
  }

working example you could be found here on STACKBLITZ DEMO .

Hope this will help to you!

Answer 2

You could try this -

import { DatePipe } from '@angular/common';

checkDate() {
    let formatedDate = new DatePipe().transform(this.Students.dob, 'dd/mm/yyyy')
    console.log(formatedDate); 
  }

Answer 3

You can use DatePipe method.

<input type="date" [(ngModel)]="Students.dob|date:'dd/MM/yyyy'" name="Students.dob">

You can read more from here. https://angular.io/api/common/DatePipe

Answer 4

You can use moment.js . Also, you need to install and import it.

npm install moment --save

import * as moment from 'moment'; //in your component

then use

checkdate(){
   const date = moment(Students.dob).format(DD-MM-YYYY);
   console.log(date);
}