React Datepicker仅激活当月日期：禁用其他日期时导航消失如何解决？

要实现只启用当月日期且不丢失导航功能，你可以通过filterDate属性过滤可选择日期，同时避免错误限制月份范围导致导航消失。以下是具体修改方案：

if (isLoad) {
    // 自定义判断日期是否属于当月的函数
    const isCurrentMonthDate = (date) => {
        const now = new Date();
        return date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear();
    };

    return (
        <DatePicker
            selected={startDate}
            placeholderText='YYYY.MM.DD'
            onChange={(date) => handleLocalDateChange(date)}
            formatWeekDay={(nameOfWeek) => nameOfWeek.toString().slice(0, 3)}
            useWeekdaysShort={true}
            // 过滤仅允许当月日期被选择
            filterDate={isCurrentMonthDate}
        />
    );
}

关键说明： #

• 使用filterDate属性：这个函数会校验每个日期，返回true则允许选择，false则禁用。自定义的isCurrentMonthDate函数会判断日期是否属于当前月份，这样非当月日期会被禁用，但依然显示，导航功能也能正常保留（可以切换月份查看，只是无法选择其他月份的日期）。
• 避免用minDate/maxDate限制当月：如果直接把minDate设为当月第一天、maxDate设为当月最后一天，导航按钮会因无法切换到其他月份而消失，filterDate则不会限制导航，完美匹配你的需求。
• 可选优化：如果项目中已引入date-fns库，也可以直接用内置的isSameMonth函数替代自定义判断，代码更简洁：

import { isSameMonth } from 'date-fns';

// 直接替换filterDate的值
filterDate={(date) => isSameMonth(date, new Date())}

修改后，日期选择器可正常切换月份，仅当前月份的日期可点击激活，其他月份日期处于禁用状态。

内容的提问来源于stack exchange，提问作者주다운