如何配置MUI X Date Range Picker以选择整周日期范围？

要实现仅允许选择周一至周日的完整周范围，且用户选择任意日期后自动填充对应周的起始和结束日期，可按以下步骤配置：

1. 准备依赖 #

确保已安装dayjs及相关扩展（用于日期计算）：

npm install dayjs @mui/x-date-pickers-pro @mui/material @emotion/react @emotion/styled

2. 核心实现代码 #

import { useState } from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import isoweek from 'dayjs/plugin/isoweek';

// 扩展dayjs支持ISO周（周一为一周起始）
dayjs.extend(isoweek);

const WeekRangePicker = () => {
  const [dateRange, setDateRange] = useState([null, null]);

  // 根据日期获取对应周的周一和周日
  const getWeekRange = (date) => {
    if (!date) return [null, null];
    const startOfWeek = date.startOf('isoWeek');
    const endOfWeek = date.endOf('isoWeek');
    return [startOfWeek, endOfWeek];
  };

  const handleDateChange = (newRange) => {
    // 取第一个非空的日期计算整周范围
    const selectedDate = newRange[0] || newRange[1];
    if (selectedDate) {
      const [weekStart, weekEnd] = getWeekRange(selectedDate);
      setDateRange([weekStart, weekEnd]);
    } else {
      setDateRange([null, null]);
    }
  };

  // 禁用非当前选中周的日期（增强交互限制）
  const shouldDisableDate = (date) => {
    if (!dateRange[0]) return false;
    const currentWeekStart = dateRange[0].startOf('isoWeek');
    const currentWeekEnd = dateRange[0].endOf('isoWeek');
    return date.isBefore(currentWeekStart) || date.isAfter(currentWeekEnd);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        localeText={{ start: 'Check-in', end: 'Check-out' }}
        value={dateRange}
        onChange={handleDateChange}
        shouldDisableDate={shouldDisableDate}
        // 可选：隐藏手动输入，仅通过日历选择
        renderInput={(startProps, endProps) => (
          <div style={{ display: 'flex', gap: 16 }}>
            <input {...startProps.inputProps} disabled />
            <input {...endProps.inputProps} disabled />
          </div>
        )}
      />
    </LocalizationProvider>
  );
};

export default WeekRangePicker;

关键逻辑说明 #

• 日期范围计算：借助dayjs的isoWeek扩展，将周一设为一周起始，通过startOf('isoWeek')和endOf('isoWeek')快速获取对应周的首尾日期。
• 自动修正范围：在onChange事件中，无论用户点击起始还是结束日期，都基于选中日期计算整周范围并更新状态，确保始终是完整周。
• 日期禁用限制：shouldDisableDate函数限制用户只能在已选中的周内操作，避免手动调整出非整周的范围。
• 输入框禁用：可选配置，防止用户手动输入不符合要求的日期，仅保留日历交互选择的方式。

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