How to change date format value in form react js

Asked Oct 14 '19 at 09:33

Active Oct 14 '19 at 10:51

Viewed 1,763 times

I have some problem when I want to get the date from JSON that output in format 31-10-2019 07:00:00, I want to change that format to YYYY-MM-DD, but at the moment, the field still displays dd/mm/yyyy, for more detail look at my code :

<FormGroup>
    <Label for="expiredDate">Expired Date</Label>
    <Input
        type="date"
        name="expiredDate"
        onChange = {this.handleForm}
        value = {moment(new Date(expiredDate)).format("YYYY-MM-DD")}
        placeholder="date placeholder"
        min = {moment().format("YYYY-MM-DD")}/>
</FormGroup>

IN User Interface

Fixed it with moment(expiredDate, 'DD/MM/YYYY hh:mm:ss').format('YYYY-MM-DD')

edited Oct 14 '19 at 10:51

Dženis H.

7,284
3
25
44

asked Oct 14 '19 at 09:33

Alexsandro Siregar

1

so what should i do if i want to display in UI with format "DD/MM/YYYY" ? – Alexsandro Siregar Oct 14 '19 at 09:37
you can write a function to manipulate it. – Udit Oct 14 '19 at 09:39
what function ? – Alexsandro Siregar Oct 14 '19 at 09:41
what is the date you receiving? – Udit Oct 14 '19 at 09:41
25-01-2021 07:00:00 from server json – Alexsandro Siregar Oct 14 '19 at 09:43
i think he just want the dates to show and not the time! – Udit Oct 14 '19 at 09:44
so how to display that bro without changin the format? it stlll DD/MM/YYYY in UI – Alexsandro Siregar Oct 14 '19 at 09:44
you're the one who understand me @Udit – Alexsandro Siregar Oct 14 '19 at 09:45
you can do that by using `new Date().toLocaleDateString()` – Udit Oct 14 '19 at 09:46
already try it . still display dd/mm/yyyy on UI . new Date(expiredDate).toLocaleDateString() ? – Alexsandro Siregar Oct 14 '19 at 09:47
yes! you won't need moment() – Udit Oct 14 '19 at 09:48
or can you share a CodeSandbox? – Udit Oct 14 '19 at 09:49
it result invalid date, i already try to console.log . – Alexsandro Siregar Oct 14 '19 at 09:52
@AlexsandroSiregar check i posted example, if it won't help please share your snippet and data that you are getting. – akhtarvahid Oct 14 '19 at 09:52
@VahidAkhtar Thanks, but where i put my value expiredDate? – Alexsandro Siregar Oct 14 '19 at 09:56
@AlexsandroSiregar the dateTime you are getting from response is causing the issue – Udit Oct 14 '19 at 10:07
ha? really ? i dont think so, because ```var date = "14-06-2019 07:00:00" var dateTime = new Date(date).toTimeString; dateTime = moment(dateTime).format("DD/MM/YYYY"); console.log(dateTime) ``` i use that, still in valid Date – Alexsandro Siregar Oct 14 '19 at 10:10
`"14-06-2019 07:00:00" ` is coming out to be an invalid date if we try to convert it into your desired format, that's because it is not the supported format – Udit Oct 14 '19 at 10:24
1

@Udit i already fixed it broo become ```moment(expiredDate, 'DD/MM/YYYY hh:mm:ss').format('YYYY-MM-DD')``` – Alexsandro Siregar Oct 14 '19 at 10:27
@AlexsandroSiregar perfect, you can share the answer, in the answer section for anyone else to see – Udit Oct 14 '19 at 10:28

How to change date format value in form react js

0 Answers0