Блог

Главная - Вопросы по программированию - Получить значение даты выбора даты в onChange

Получить значение даты выбора даты в onChange

#reactjs #react-datepicker

#reactjs #реагировать-выбор даты

Вопрос:

Я использую react-datepicker , и я не могу получить фактическую дату onChange .

Это мой компонент :

 import DatePicker from "react-datepicker";

const DatePick = () => {
  return (
    <DatePicker
      locale="fr"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        console.log(date);
      }}
    />
  );
};

export default DatePick;

В консоли.журнал я получаю такую строку Thu Dec 09 2021 00:00:00 GMT 0100 (heure normale d’Europe centrale) .

Мне нужно получить дату как dd-MM-yyyy в onChange или дату, которую я могу отформатировать и использовать позже в форме, и отправить ее значение.

Ответ №1:

Используйте приведенный ниже код, он будет работать как шарм

 const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
 <>
  <DatePicker
    dateFormat="dd/MM/yyyy"
    value={Cdate}
    onChange={(date) => {
      const d = new Date(date).toLocaleDateString('fr-FR');
      console.log(d);
      setDate(d);
    }}
  />
 </>
);

ссылка на stackblitz: https://stackblitz.com/edit/react-nov8it?file=src/App.js

Ответ №2:

Вы можете использовать объект Date для форматирования даты по своему усмотрению. Например :

 onChange={(date) => {
    const dateString = new Date(date).toLocaleDateString()
    console.log(dateString)
  }}

Затем вы получите дату, отформатированную в соответствии с вашим часовым поясом. Однако, если вы указали формат, отличный DatePicker от вашего местного формата часового пояса, вы можете указать его в качестве параметра для toLocaleDateString :

 new Date(date).toLocaleDateString("fr-FR")
Метки: