如何在反应日历中格式化日期？

如何解决如何在反应日历中格式化日期？

我检查了文档，找到了 formatLongDate，我尝试了这个，但它不是格式化日期。

我想要这样的日期 YYYY-MMM-dd 但日历给了我这样的日期 2021 年 4 月 7 日星期三 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;

解决方法

您可以使用 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>
  );
}

这里是codesandbox。

在使用 Int.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