0

I'm beginner in ReactJS and I'm trying to save some dates fields.

By default, the dates are save in format yyyy-MM-dd, but when I able to send the date for the API the format should be in format dd/mm/yyyy.

I already try using .toLocaleDateString('pt-BR', {timeZone: 'UTC'});. But when I did that, return error:

The specified value "19/8/2020" does not conform to the required format, "yyyy-MM-dd".

Here's my code I put in CodeSandBox

And, here where I get the date values:

import React, { useState } from "react";

const NewUser = () => {
  const [data, setData] = useState({
    birthdate: "",
    admission_date: ""
  });

  const changeField = (field, value) => {
    const auxData = { ...data };
    auxData[field] = value;
    setData(auxData);
  };

  return (
    <div>
      <span>Born</span>
      <input
        id="birthdate"
        type="date"
        value={data.birthdate}
        onChange={(event) => changeField("birthdate", event.target.value)}
      />
      <div />
      <span>Admission Date</span>
      <input
        id="admission_date"
        type="date"
        value={data.admission_date}
        onChange={(event) => changeField("admission_date", event.target.value)}
      />
    </div>
  );
};

export default NewUser;
coderpc
  • 4,119
  • 6
  • 51
  • 93
vbernal
  • 673
  • 8
  • 21
  • What API are you talking about? The code you have posted does not reference any API and does not have any problems. – see sharper Aug 24 '20 at 23:34
  • I just summarized the code of the important fields, but I'm going to take this data and make a `post` in an API. And I need to send it in the format `dd/mm/yyyy` – vbernal Aug 24 '20 at 23:39
  • 1
    Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) – Rudu Aug 24 '20 at 23:44

1 Answers1

4

Don't import the entire momentjs library just for this simple task.

// yyyy-MM-dd
const input = "2020-08-19"
const [year, month, day] =  input.split('-')

// dd/mm/yyyy
console.log(`${day}/${month}/${year}`)

Also, check out You-Dont-Need-Momentjs for some lighter alternatives, and even some native methods for common use cases of handling dates.

Also, you probably want to wait until you're ready to send the data to the server before applying the transformation (instead of trying to do this inside changeField). Example:

Edit friendly-leftpad-cz7jw

ksav
  • 20,015
  • 6
  • 46
  • 66
  • Hey Ksav, I did that, but that return the error: `The specified value "19/8/2020" does not conform to the required format, "yyyy-MM-dd". ` – vbernal Aug 24 '20 at 23:57
  • `toLocaleDateString` returned that error, right? What are you trying to do with that? – ksav Aug 25 '20 at 00:05
  • 2
    `'2020-08-09'.split('-').reverse().join('/')` is somewhat shorter, though possibly less efficient. ;-) – RobG Aug 25 '20 at 03:11
  • 2
    Agree. The main takeaway for OP here is that there are plenty of ways to achieve the same goal with just a few lines of js, and without importing a 329K date handling library. – ksav Aug 25 '20 at 03:20