Как отформатировать дату в React-Calendar?

Question

Я проверяю документ и обнаруживаю formatLongDate, и я пробую это, но это не дата форматирования.

Я хочу, чтобы моя дата была такой: ГГГГ-МММ-дд, но календарь дал мне такую ​​дату. Среда, 7 апреля 2021 г., 00:00:00 GMT+ 0000 Как я могу отформатировать эту дату? Я новичок в React JS. Спасибо.

      import React, {useState} from 'react';
import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css'


const comp = () => {

    const [date, setDate] = useState(new Date());

    return (
        <div>
            <Calendar
                onChange={setDate}
                value={date}
                maxDate={new Date()}
                formatLongDate={(locale, date) => formatDate(date, 'YYYY-MMM-dd')}
            />

        </div>
    );

};

export default comp;

Answer 1

Далее следует еще один более эффективный способ достижения вашей цели без введения какой-либо другой зависимости при использовании Int.DateTimeFormat .

Посетите для получения дополнительной информации https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat.

      import React, {useState} from 'react';
import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css'


const comp = () => {

    const [date, setDate] = useState(new Date());
    const locale = 'fr-CA'; 
    return (
        <div>
            <Calendar
                onChange={setDate}
                value={date}
                maxDate={new Date()}
                formatDay ={
                  (date) => new Intl.DateTimeFormat(
                    locale, 
                    {
                      year: "numeric", 
                      month: "2-digit", 
                      day: "2-digit"
                    }).format(date)
                  }
                 />
        </div>
    );
};

export default comp;

Это поможет вам, если количество зависимостей является фактором для вашего приложения ( время загрузки приложения ).

Вы можете просмотреть его в прямом эфире здесь https://codesandbox.io/s/adoring-franklin-zvmti

Answer 2

Вы можете использовать dayjs для форматирования даты. Вы можете увидеть код ниже

      import React, {useState} from 'react';
import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import dayjs from 'dayjs';

export default function App() {
  const [date, setDate] = useState(new Date());
  return (
      <div>
          <Calendar
              onChange={setDate}
              value={date}
              maxDate={new Date()}
              formatDay ={(locale, date) => dayjs(date).format('YYYY-MM-DD')}
          />
      </div>
  );
}

вот коды .