Display shorter date format

Question

The date is sent from backend in this format:

"2022-01-01T00:00:00.00000"

How to display date without hours/minutes/seconds like this:

2022-01-01?

On my .tsx component I have InputDatepicker:

            <InputDatepicker
              label="Training date"
              value={trainingData?.trainingDate || ''}
            />

use momentjs https://momentjs.com to make life easier with DateTime. — mehedi, Nov 30 '22 at 13:54
@mehedi Even the Moment project itself [recommends using something newer](https://momentjs.com/docs/#/-project-status/), I would definitely avoid adding it into a new project. — DBS, Nov 30 '22 at 13:56
Does this answer your question? [Remove time after converting date toISOString](https://stackoverflow.com/questions/47066555/remove-time-after-converting-date-toisostring) — DBS, Nov 30 '22 at 13:59
@DBS thanks . I didn't knew that as I worked with momentjs few years back. — mehedi, Nov 30 '22 at 14:01

score 3 · Accepted Answer · answered Nov 30 '22 at 13:47

3

You can get the first element of the result of split, like this:

console.log("2022-01-01T00:00:00.00000".split('T')[0]);

answered Nov 30 '22 at 13:47

Lajos Arpad

it looks good, but one more thing - how to use it inside value={ tag? – TheFastestTurtle Dec 01 '22 at 07:01
@TheFastestTurtle I would first try `(trainingData?.trainingDate || '').split('T')[0]` and see whether that works. – Lajos Arpad Dec 01 '22 at 09:38

score 1 · Answer 2 · answered Nov 30 '22 at 13:51

1

Simple

new Date('2022-01-01T00:00:00.00000').toLocaleDateString('en-CA');

answered Nov 30 '22 at 13:51

Rahul Beniwal

score 0 · Answer 3 · answered Nov 30 '22 at 13:51

0

const newDate = date.slice(0, 10);

answered Nov 30 '22 at 13:51

AndriiKrupenko

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 08:33

3 Answers3