在 React Datepicker 日历中仅显示日期

Question

我正在尝试在我的 React 应用程序中使用 React Datepicker。我正在关注此文档 - https://reactdatepicker.com/

我需要一个只会显示 31 天的日期选择器。

这是 react-datepicker 文档中的简单代码。

setDayPicker(date)} dateFormat="yyy/MM/dd" isClearable={true}

/>

它显示了完整的日历。如何自定义日历？是否可以从日历中删除 header 并将其替换为文本“Days”？

Answer 1

以下代码将为您提供当前年份的日期选择器，其中只有 header 中的月份。你只需要使用 renderCustomHeader 属性的 DatePicker.

    const year = 2022; // can be provided externally
    const month = 2; // can be provided externally
    const date = 24; // can be provided externally
    
    const [startDate, setStartDate] = useState(new Date(year, month, date));
    const minDate = new Date(year, month, 1);
    const maxDate = new Date(year, month + 1 , 0);
    
    const renderDayContents = (day, date) => {
    if(date < minDate || date > maxDate){
      return <span></span>;
    }
    return <span>{date.getDate()}</span>;
  };
    
    return ( 
        <DatePicker
        selected = {startDate}
        minDate = {minDate}
        maxDate = {maxDate}
        onChange = {(date) => setStartDate(date)}
        renderCustomHeader = {() => <div></div>}
        renderDayContents = {renderDayContents}
        dateFormat = "dd"
        />
    );

它将是这样的：

解释：

我们可以用DatePicker的renderCustomHeader属性创建客户header。
这个函数 returns JSX（有点像 html）它有空的 div 因为我们不想在 header 中显示任何东西.
除了renderCustomHeader属性，我们还设置了DatePicker的minDate和maxDate属性限制当月.
您需要在使用 DatePicker 的组件中复制以上代码。

您可以参考 https://reactdatepicker.com/#example-custom-header 了解更多关于自定义 header for DatePicker

在 React Datepicker 日历中仅显示日期

Showing only days in React Datepicker calendar

react-datepicker