Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the output date format of input type="date" in angular 4?

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.

like image 390
Vignesh Mohanraj Avatar asked May 21 '18 09:05

Vignesh Mohanraj


People also ask

Can we change input type date format?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

What is the format of input type date?

dd/mm/yyyy.


1 Answers

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!

like image 103
coder Avatar answered Oct 04 '22 20:10

coder