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

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.

coder · Accepted Answer · 2018-05-23 03:08:54Z

7

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!

edited May 23, 2018 at 3:08

answered May 21, 2018 at 10:09

coder

8,74216 gold badges41 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pardeep Jain · Accepted Answer · 2018-05-21 09:16:54Z

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); 
  }

answered May 21, 2018 at 9:16

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

1 Comment

Vignesh Mohanraj Over a year ago

is there any solution to work this method <input type="date" [(ngModel)]="Students.dob|date:'dd/MM/yyyy'" name="Students.dob">

Engineer · Accepted Answer · 2018-05-21 09:16:49Z

1

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

answered May 21, 2018 at 9:16

Engineer

3101 silver badge9 bronze badges

4 Comments

Vignesh Mohanraj Over a year ago

When I use the Pipe expression in the ngModel shows error like "Cannot have a pipe in an action expression at column 16 in [students.doj | date:'dd/MM/yyyy'=$event] in"

Vikas Rana Over a year ago

@VigneshMohanraj If you one-way bind the model like [ngModel]="Students.dob|date you can use this.

Gustavo Ulises Arias Méndez Over a year ago

But the question specifies 2-way data binding

Anil Sharma Over a year ago

you shuold use [ngModel] = "Students.dob|date" and (onModelChange)="Students.dob=$event"

Shankar Ganesh Jayaraman · Accepted Answer · 2021-01-29 04:37:26Z

0

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);
}

edited Jan 29, 2021 at 4:37

Shankar Ganesh Jayaraman

1,5011 gold badge16 silver badges26 bronze badges

answered Jan 28, 2021 at 8:34

Alejandro Gonzalez

1

Comments

lerenoir · Accepted Answer · 2023-08-10 17:08:26Z

0

I had the same problem in the html templates and solved it like this:

Go to your app.module.ts search for the providers and insert DatePipe
go into the html template where you want to change the date format and change it like that {{Students.dob | date:'dd/MM/yyyy'}}
Save the two edited files and check how you date is displayed :)

answered Aug 10, 2023 at 17:08

lerenoir

444 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related