0

I'm using the DateRangePicker component from MUI X in my React application. I want to configure it such that users can only select date ranges that represent a full week (i.e., from Monday to Sunday).

Here's the basic setup I have:

import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';


<DateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />

Codesandbox link

How can I modify the DateRangePicker to enforce the selection of only weekly ranges? Ideally, if a user selects a date, the component should auto-fill the range to the corresponding week. Any guidance or examples would be greatly appreciated!

Mir Stephen
  • 1,758
  • 4
  • 23
  • 54
  • The best you can do with a `DateRangePicker` is use validation to show validation error and ask user to select a week. If that's not good enough, I'd say use a date picker instead of a date range picker, after user selects a date, use the start of week and end of week to mark the week and keep it in a separate state than the controlled state of date picker while customizing the `day` slot to show the whole week selected in the UI. – 0xts Aug 14 '23 at 04:55

0 Answers0