如何在React MUI X Date Picker中仅启用每月最后一天？

MUI X Date Picker确实没有直接的"启用指定日期"配置项，但可以通过shouldDisableDate属性反向实现——禁用所有非当月最后一天的日期，从而只保留每月最后一天可选。

核心思路 #

利用shouldDisableDate回调函数，对每个日期进行判断：如果当前日期不是当月最后一天，则返回true（禁用该日期）；反之返回false（允许选择）。

完整代码示例（基于Day.js适配器） #

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { TextField } from '@mui/material';
import dayjs from 'dayjs';

export default function LastDayOnlyPicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  // 判断是否禁用当前日期：非当月最后一天则禁用
  const shouldDisableDate = (date) => {
    if (!date) return false;
    // 获取当月最后一天的起始时刻（统一时区和时分秒，避免判断误差）
    const lastDayOfMonth = dayjs(date).endOf('month').startOf('day');
    // 比较当前日期与当月最后一天是否为同一天
    return !dayjs(date).startOf('day').isSame(lastDayOfMonth);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="选择每月最后一天"
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        shouldDisableDate={shouldDisableDate}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

基于Date-Fns适配器的版本（可选） #

如果你使用date-fns作为日期处理库，判断逻辑可以换成：

import { lastDayOfMonth, isSameDay } from 'date-fns';

const shouldDisableDate = (date) => {
  if (!date) return false;
  const lastDay = lastDayOfMonth(date);
  return !isSameDay(date, lastDay);
};

关键细节说明 #

• 统一使用startOf('day')处理日期：避免因时分秒不同导致的判断错误（比如当月最后一天的23:59和当天00:00会被视为同一天）
• 空值判断：当date为null时返回false，避免组件初始化时出现异常

内容的提问来源于stack exchange，提问作者Kumar