如何在Material UI日期选择器中高亮周末（周六和周日）？

Hey there! I’ve tackled this exact problem before, so let me break down how to get those Saturdays and Sundays standing out in your Material UI Date Picker—whether you’re using the newer MUI X components or the legacy Material UI pickers.

For MUI X Date Pickers (Current Version) #

MUI X uses slot props for customizing individual components, which makes styling weekends straightforward. Here’s a working example:

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

// Helper function to check if a date is a weekend
const isWeekend = (date) => {
  const dayOfWeek = date.getDay();
  // 0 = Sunday, 6 = Saturday
  return dayOfWeek === 0 || dayOfWeek === 6;
};

export default function WeekendHighlightDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Select a Date"
        slotProps={{
          day: {
            // Use sx prop to conditionally style days
            sx: (params) => ({
              backgroundColor: isWeekend(params.date) ? '#f5f5f5' : 'transparent',
              fontWeight: isWeekend(params.date) ? 600 : 400,
              // Adjust hover state to match the highlight
              '&:hover': {
                backgroundColor: isWeekend(params.date) ? '#e0e0e0' : undefined,
              },
            }),
          },
        }}
      />
    </LocalizationProvider>
  );
}

Key Details: #

• The isWeekend function checks the day of the week using getDay() (0 for Sunday, 6 for Saturday).
• We use slotProps.day.sx to apply conditional styles: a light gray background and bold text for weekends, with a matching hover state.
• You can tweak the colors to match your app’s theme—swap #f5f5f5 with theme.palette.secondary.light if you’re using MUI’s theme system.

For Legacy Material UI Pickers (@material-ui/pickers) #

If you’re still using the older Material UI picker library, you’ll use the renderDay prop to customize individual day cells:

import { DatePicker } from '@material-ui/pickers';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

const isWeekend = (date) => {
  const dayOfWeek = date.getDay();
  return dayOfWeek === 0 || dayOfWeek === 6;
};

// Custom day renderer
const renderWeekendDay = (day, selectedDate, isDayInCurrentMonth) => {
  const weekendStyle = isWeekend(day) ? {
    backgroundColor: '#f5f5f5',
    fontWeight: 600,
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  } : {};

  return (
    <div style={weekendStyle}>
      {day.getDate()}
    </div>
  );
};

export default function LegacyWeekendHighlightPicker() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="Select a Date"
        renderDay={renderWeekendDay}
      />
    </MuiPickersUtilsProvider>
  );
}

Quick Notes: #

• The renderDay function receives the current day, selected date, and a flag for whether the day is in the current month.
• We apply inline styles directly to the day cell container for weekends, ensuring the highlight is visible.

Troubleshooting Tips: #

• Double-check that you’ve installed the required date adapter (like date-fns, moment, or luxon)—the pickers won’t work without it.
• If your styles aren’t applying, make sure you’re targeting the correct slot or prop for your picker version (MUI X uses slotProps, legacy uses renderDay).
• For more advanced styling, you can use MUI’s styled component instead of inline sx styles to keep your code cleaner.

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