CODEWITHSUNDEEP
reactjsdateeventsinputformatting
Shruthi R
Shruthi R

Reputation: 1923

ReactJS - How to change the date format from an input field?

In react app, I am using an array like,

const result = [
  {firstname: "Shruthi", lastname: "R", phone: "1234567890", birthday: "24/05/1991"},
  {firstname: "Maanya", lastname: "C", phone: "8882334324", birthday: "19/07/1990"},
  {firstname: "Chethan", lastname: "Kumar", phone: "7888382222", birthday: "24/05/1995"}
];

Date input field is,

<input type="date" onChange={props.handleOnChange} />

handleOnChange = (e) => {
  const date = e.target.value; // getting different format here
  console.log(date);
}

Based on the above, date input field and the birthday field in array list (result) contains dd/mm/yyyy format but in handleOnChange function I am getting it in yyyy-mm-dd format.

How can I change the date format to dd/mm/yyyy ?

Upvotes: 0

Views: 6765

Answers (2)

Mohiuddin Khan
Mohiuddin Khan

Reputation: 523

You can use this method

let today  = new Date("2020-11-18");
today.toLocaleDateString("en-US"); // 11/18/2020
today.toLocaleDateString("en-GB"); // 18/11/2020
today.toLocaleDateString("bn-IN"); // ১৮/১১/২০২০

or you can use moment

moment(moment('2020-11-18', 'YYYY-MM-DD')).format('DD-MM-YYYY');

Upvotes: 1

Rahul Fernando
Rahul Fernando

Reputation: 41

There is a object called Intl.DateTimeFormat that enable language-sensitive date and time formatting in JavaScript. You can use this as follow and do changes you want

console.log(new Intl.DateTimeFormat('en-US').format(date));

reference

Upvotes: 2

Related Questions