How to convert date to dd-mm-yyyy in react

JavaScript
1

Hi,
I am new to react (just three days) and I currently doing a project using my past experience in Jquery and ASP.NET to write the project.
The challenge I am currently having now is how to convert date in JSON (2018-01-01T00:00:00) format to “dd-mm-yyyy”.

Thank you in advance

2

Hello @Abraham1973,

I have used some JavaScript to make the conversion, does it help?

let date = new Date("2018-01-01T00:00:00");
/* Date format you have */
let dateMDY = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
/* Date converted to MM-DD-YYYY format */

Thanks.

1 Like
3

Thanks, Thinkingape46.

I have tried your method it didn’t yield the right result. I got this method from the react website **

{new Date(staff.dob ).toDateString()}

** which display long date. however, what I wanted is a short date with a format as (dd-mm-yyyy) or (dd/mm/yyyy).

Thank you so much

4

Thanks to all that support me to correct the issue I had with date format in React.
if you want to display your date in the format as “dd/mm/yyyy” just add your dateobject like this
{new Date(dateobject ).toLocaleDateString()}

5

Hello @Abraham1973,

Instead of using
**ToDateString() ** method.

You might want to extract date, month and year individually and concat into string of your preferred format i.e. DD-MM-YYYY.

Thank you.

6

Thanks, Thinkingape46, but why do you want to do that when you can achieve it with a single line like as I shared in my earlier reply, see below

{new Date(dateobject ).toLocaleDateString()}

I think this will resolve the format.

Thank anyway

7

@Abraham1973,

Ok, if the single line code is giving you the expected result, no need to do the hard way obviously.

I have one thing to add, I just remembered that,

toLocaleDateString() returns the date in MM-DD-YYYY format and not DD-MM-YYYY format.

This might be the reason, I have written previously written to concat the strings.

Thank you.

1 Like
8

Hi
just as the name of the method implies it make use your local date
toLocaleDateString()

9

Hi! @Abraham1973 I’m using this functions to convert dates.

export const formatToSimpleDateTime
= (
  date: DateType | string | null | undefined
) =>
  date !== null && date !== undefined
    ? format(new Date(date), "dd/MM/Y - HH:mm")
    : undefined;

export const formatToSimpleDate = (
  date: DateType | string | null | undefined
) =>
  date !== null && date !== undefined
    ? format(new Date(date), "dd/MM/Y")
    : undefined;

export const formatToSimpleTime = (
  date: DateType | string | null | undefined
) =>
  date !== null && date !== undefined
    ? format(new Date(date), "HH:mm")
    : undefined;

export const formatToSimpleDateWithSeconds = (
  date: DateType | string | null | undefined
) =>
  date !== null && date !== undefined
    ? format(new Date(date), "dd/MM/Y - HH:mm:ss")
    : undefined;
1 Like
10

Your need that function called “formatToSimpleDate”.

11

Thanks LeonAvanch,

I try this as well, I start to like this forum am learning .

Thank you so much guys

1 Like