# WeekPicker
Package: @mantine/dates
Import: import { WeekPicker } from '@mantine/dates';
Description: Inline week, multiple weeks and weeks range picker

## Usage

`WeekPicker` renders the same calendar as [DatePicker](https://mantine.dev/llms/dates-date-picker.md), but selects whole weeks:
hovering any day highlights its week and clicking selects it. Week numbers are always displayed.



## Week value

The value is a date string in `YYYY-MM-DD` format that points to the first day of the selected week.
The first day of the week is determined by the `firstDayOfWeek` prop or by the
[DatesProvider](https://mantine.dev/llms/dates-getting-started.md) settings (Monday by default). Use `getStartOfWeek` and `getEndOfWeek`
exported from `@mantine/dates` to get the week boundaries from the value.

```tsx
import { useState } from 'react';
import { Text } from '@mantine/core';
import { getEndOfWeek, getStartOfWeek, WeekPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <>
      <WeekPicker value={value} onChange={setValue} />
      <Text mt="md" size="sm">
        Value: {value || '–'}
      </Text>
      <Text size="sm">
        Week: {value ? `${getStartOfWeek(value)} – ${getEndOfWeek(value)}` : '–'}
      </Text>
    </>
  );
}
```


## Allow deselect

Set `allowDeselect` to allow users to deselect the currently selected week by clicking on it.
`allowDeselect` is disregarded when the `type` prop is `range` or `multiple`. When a week is
deselected, `onChange` is called with `null`.



## Multiple weeks

Set `type="multiple"` to allow users to pick multiple weeks:



## Weeks range

Set `type="range"` to allow users to pick a weeks range. The value is a tuple of the first day of the
first week and the first day of the last week:



## Single week in range

By default, it is not allowed to select a single week as a range – when the user clicks the same week a second time, it is deselected.
To change this behavior, set the `allowSingleDateInRange` prop. `allowSingleDateInRange` is ignored when the
`type` prop is not `range`.



## First day of week

Set the `firstDayOfWeek` prop to change which day starts the week (0 – Sunday, 6 – Saturday). It changes both the
calendar layout and the value that is emitted:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker firstDayOfWeek={0} />;
}
```


## Week controls

Every week number is a button that selects its week. Days are not focusable, they can only be
clicked with the mouse. Use `getWeekControlProps` to pass props to week controls based on the first
date of the week, for example to disable specific weeks:

```tsx
import dayjs from 'dayjs';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return (
    <WeekPicker
      getWeekControlProps={(weekStart) => ({
        'aria-label': `Select week starting on ${dayjs(weekStart).format('D MMMM')}`,
        disabled: dayjs(weekStart).day(5).isBefore(dayjs(), 'day'),
      })}
    />
  );
}
```


## Presets

Use the `presets` prop to add custom week presets. Presets are displayed next to the calendar.
Any date inside the week can be used as a preset value:

```tsx
import dayjs from 'dayjs';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return (
    <WeekPicker
      presets={[
        { value: dayjs().format('YYYY-MM-DD'), label: 'This week' },
        { value: dayjs().add(1, 'week').format('YYYY-MM-DD'), label: 'Next week' },
        { value: dayjs().subtract(1, 'week').format('YYYY-MM-DD'), label: 'Last week' },
        { value: dayjs().add(4, 'week').format('YYYY-MM-DD'), label: 'In a month' },
      ]}
    />
  );
}
```


To use `presets` with `type="range"`, define the value as a tuple of two dates:

```tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[string | null, string | null]>([null, null]);
  return (
    <WeekPicker
      type="range"
      value={value}
      onChange={setValue}
      presets={[
        {
          value: [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'week').format('YYYY-MM-DD')],
          label: 'Next two weeks',
        },
        {
          value: [dayjs().subtract(3, 'week').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
          label: 'Last four weeks',
        },
        {
          value: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')],
          label: 'This month',
        },
      ]}
    />
  );
}
```


## Default date

Use the `defaultDate` prop to set the date value that will be used to determine which month should be displayed initially.
Note that if you set the `date` prop, then the `defaultDate` value will be ignored.

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker defaultDate="2015-02-01" />;
}
```


## Hide outside dates

Set `hideOutsideDates` to hide days of the selected week that are outside of the displayed month.
When `numberOfColumns` is larger than 1, outside dates are hidden by default,
set `hideOutsideDates={false}` to display whole weeks:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker hideOutsideDates />;
}
```


## Min and max date

Set the `minDate` and `maxDate` props to define minimum and maximum dates. A week can be selected
if it contains at least one enabled day. Note that the value is the first day of the week,
it can be before `minDate`.

```tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <WeekPicker
      value={value}
      onChange={setValue}
      minDate={dayjs().subtract(2, 'week').format('YYYY-MM-DD')}
      maxDate={dayjs().add(2, 'week').format('YYYY-MM-DD')}
    />
  );
}
```


## Exclude dates

`excludeDate` disables individual days. A week that contains enabled days can still be selected through those days:

```tsx
import dayjs from 'dayjs';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker excludeDate={(date) => dayjs(date).day() === 0 || dayjs(date).day() === 6} />;
}
```


## Add props to day, year and month control

Use `getDayProps`, `getMonthControlProps` and `getYearControlProps` to add props to the corresponding controls:

```tsx
import dayjs from 'dayjs';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return (
    <WeekPicker
      getDayProps={(date) => {
        if (dayjs(date).day() === 5) {
          return { style: { color: 'var(--mantine-color-blue-filled)', fontWeight: 700 } };
        }
        return {};
      }}
      getMonthControlProps={(date) => (dayjs(date).month() === 1 ? { disabled: true } : {})}
      getYearControlProps={(date) => (dayjs(date).year() === 2028 ? { disabled: true } : {})}
    />
  );
}
```


## Number of columns

Set the `numberOfColumns` prop to define the number of pickers that will be rendered side by side:



## Max level

To disallow users from going to the decade level, set `maxLevel="year"`:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker maxLevel="year" />;
}
```


## Full width

Set the `fullWidth` prop to make the week picker stretch to fill 100% of its parent container width:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker fullWidth />;
}
```


## Size



## Localization

Usually it is better to specify the `@mantine/dates` package locale in [DatesProvider](https://mantine.dev/llms/dates-getting-started.md),
but you can also override the locale per component:

```tsx
import 'dayjs/locale/ru';
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker locale="ru" />;
}
```


## Native level select

Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return <WeekPicker withNativeLevelSelect />;
}
```


## Accessibility

### Aria labels

Set the `ariaLabels` prop to specify `aria-label` attributes for next/previous controls:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return (
    <WeekPicker
      ariaLabels={{
        nextDecade: 'Next decade',
        previousDecade: 'Previous decade',
        nextYear: 'Next year',
        previousYear: 'Previous year',
        nextMonth: 'Next month',
        previousMonth: 'Previous month',
        yearLevelControl: 'Change to decade view',
        monthLevelControl: 'Change to year view',
      }}
    />
  );
}
```

### Week control aria-label

By default, week controls have an `aria-label` with the first and the last day of the week. Use `getWeekControlProps` to customize it:

```tsx
import { WeekPicker } from '@mantine/dates';

function Demo() {
  return (
    <WeekPicker
      getWeekControlProps={(weekStart) => ({
        'aria-label': `Select week starting on ${weekStart}`,
      })}
    />
  );
}
```

### Keyboard interactions

Only week controls (week numbers) can be focused with the keyboard.

When `presets` are used, only one preset button is in the tab order. With focus on a preset,
`ArrowDown` and `ArrowUp` move focus between presets without selecting them, `Enter` or `Space`
selects the focused preset, and `Tab` moves focus to the calendar.

When the level is changed with the keyboard (for example, `Enter` on the month label), focus
moves to the label of the new level or to the grid control in the tab order if the new level
does not have a clickable label.


#### Props

**WeekPicker props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| allowDeselect | boolean | - | Determines whether user can deselect the date by clicking on selected item, applicable only when type="default" |
| allowSingleDateInRange | boolean | - | Determines whether a single day can be selected as range, applicable only when type="range" |
| ariaLabels | CalendarAriaLabels | - | `aria-label` attributes for controls on different levels |
| columnsToScroll | number | - | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |
| date | string \| Date | - | Displayed date in controlled mode |
| decadeLabelFormat | string \| ((startOfDecade: string, endOfDecade: string) => ReactNode) | - | `dayjs` format for decade label or a function that returns decade label based on the date value |
| defaultDate | string \| Date | - | Initial displayed date in uncontrolled mode |
| defaultLevel | "month" \| "year" \| "decade" | - | Initial displayed level (uncontrolled) |
| defaultValue | DateValue \| DatesRangeValue<DateValue> \| DateValue[] | - | Default value for uncontrolled component |
| enableKeyboardNavigation | boolean | - | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |
| excludeDate | (date: string) => boolean | - | Callback function to determine whether the day should be disabled |
| firstDayOfWeek | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | - | Number 0-6, where 0 – Sunday and 6 – Saturday. |
| fullWidth | boolean | - | Determines whether the list should take the full width of its container |
| getDayAriaLabel | (date: string) => string | - | Assigns `aria-label` to `Day` components based on date |
| getDayProps | (date: string) => Omit<Partial<DayProps>, "vars" \| "classNames" \| "styles"> & DataAttributes | - | Passes props down to `Day` components |
| getMonthControlProps | (date: string) => Partial<PickerControlProps> & DataAttributes | - | Passes props down month picker control |
| getWeekControlProps | (weekStart: string) => Partial<MonthWeekControlProps> | - | Passes props down to week controls, receives the first date of the week in `YYYY-MM-DD` format |
| getYearControlProps | (date: string) => Partial<PickerControlProps> & DataAttributes | - | Passes props down to year picker control based on date |
| headerControlsOrder | ("next" \| "previous" \| "level")[] | - | Controls order |
| hideOutsideDates | boolean | - | Determines whether outside dates should be hidden |
| hideWeekdays | boolean | - | Determines whether weekdays row should be hidden |
| highlightToday | boolean | - | Determines whether today should be highlighted with a border |
| level | "month" \| "year" \| "decade" | - | Current displayed level (controlled) |
| locale | string | - | Dayjs locale, defaults to value defined in DatesProvider |
| maxDate | string \| Date | - | Maximum possible date in `YYYY-MM-DD` format or Date object |
| maxLevel | "month" \| "year" \| "decade" | - | Max level that user can go up to |
| minDate | string \| Date | - | Minimum possible date in `YYYY-MM-DD` format or Date object |
| monthLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display month label or a function that returns month label based on month value |
| monthsListFormat | string \| ((date: string) => string) | - | `dayjs` format for months list or a function that returns month label based on the date value |
| nextIcon | React.ReactNode | - | Change next icon |
| nextLabel | string | - | Next button `aria-label` |
| numberOfColumns | number | - | Number of columns displayed next to each other |
| onChange | (value: DatePickerValue<Type, string>) => void | - | Called when value changes |
| onDateChange | (date: string) => void | - | Called when date changes |
| onLevelChange | (level: CalendarLevel) => void | - | Called when level changes |
| onMonthMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void | - | Called when mouse enters month control |
| onMonthSelect | (date: string) => void | - | Called when user selects month |
| onNextDecade | (date: string) => void | - | Called when the next decade button is clicked |
| onNextMonth | (date: string) => void | - | Called when the next month button is clicked |
| onNextYear | (date: string) => void | - | Called when the next year button is clicked |
| onPreviousDecade | (date: string) => void | - | Called when the previous decade button is clicked |
| onPreviousMonth | (date: string) => void | - | Called when the previous month button is clicked |
| onPreviousYear | (date: string) => void | - | Called when the previous year button is clicked |
| onYearMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void | - | Called when mouse enters year control |
| onYearSelect | (date: string) => void | - | Called when user selects year |
| presets | WeekPickerPreset<Type>[] | - | Predefined values to pick from |
| previousIcon | React.ReactNode | - | Change previous icon |
| previousLabel | string | - | Previous button `aria-label` |
| renderDay | (date: string) => React.ReactNode | - | Controls day value rendering |
| size | MantineSize | - | Component size |
| type | "range" \| "multiple" \| "default" | - | Picker type: range, multiple or default |
| value | DateValue \| DatesRangeValue<DateValue> \| DateValue[] | - | Value for controlled component |
| weekdayFormat | string \| ((date: string) => string) | - | `dayjs` format for weekdays names |
| weekendDays | (0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6)[] | - | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |
| withCellSpacing | boolean | - | Determines whether controls should be separated |
| withNativeLevelSelect | boolean | - | Determines whether level select controls should be rendered as native `<select>` elements |
| yearLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display year label or a function that returns year label based on year value |
| yearsListFormat | string \| ((date: string) => string) | - | `dayjs` format for years list or a function that returns year label based on the date value |
| yearsSelectRange | [number, number] | - | Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set. |

**WeekPicker.Input props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| allowDeselect | boolean | - | Determines whether user can deselect the date by clicking on selected item, applicable only when type="default" |
| allowSingleDateInRange | boolean | - | Determines whether a single day can be selected as range, applicable only when type="range" |
| ariaLabels | CalendarAriaLabels | - | `aria-label` attributes for controls on different levels |
| clearButtonProps | React.ComponentProps<"button"> | - | Props passed down to the clear button |
| clearSectionMode | ClearSectionMode | - | Determines how the clear button and rightSection are rendered |
| clearable | boolean | - | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |
| closeOnChange | boolean | - | Determines whether the dropdown is closed when date is selected, not applicable with `type="multiple"` |
| columnsToScroll | number | - | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |
| date | string \| Date | - | Displayed date in controlled mode |
| decadeLabelFormat | string \| ((startOfDecade: string, endOfDecade: string) => ReactNode) | - | `dayjs` format for decade label or a function that returns decade label based on the date value |
| defaultDate | string \| Date | - | Initial displayed date in uncontrolled mode |
| defaultLevel | "month" \| "year" \| "decade" | - | Initial displayed level (uncontrolled) |
| defaultValue | DateValue \| DatesRangeValue<DateValue> \| DateValue[] | - | Default value for uncontrolled component |
| description | React.ReactNode | - | Contents of `Input.Description` component. If not set, description is not displayed. |
| descriptionProps | InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Description` component |
| disabled | boolean | - | Sets `disabled` attribute on the `input` element |
| dropdownType | "popover" \| "modal" | - | Type of the dropdown |
| enableKeyboardNavigation | boolean | - | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |
| error | React.ReactNode | - | Contents of `Input.Error` component. If not set, error is not displayed. |
| errorProps | InputErrorProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Error` component |
| excludeDate | (date: string) => boolean | - | Callback function to determine whether the day should be disabled |
| firstDayOfWeek | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | - | Number 0-6, where 0 – Sunday and 6 – Saturday. |
| fullWidth | boolean | - | Determines whether the list should take the full width of its container |
| getDayAriaLabel | (date: string) => string | - | Assigns `aria-label` to `Day` components based on date |
| getDayProps | (date: string) => Omit<Partial<DayProps>, "vars" \| "classNames" \| "styles"> & DataAttributes | - | Passes props down to `Day` components |
| getMonthControlProps | (date: string) => Partial<PickerControlProps> & DataAttributes | - | Passes props down month picker control |
| getWeekControlProps | (weekStart: string) => Partial<MonthWeekControlProps> | - | Passes props down to week controls, receives the first date of the week in `YYYY-MM-DD` format |
| getYearControlProps | (date: string) => Partial<PickerControlProps> & DataAttributes | - | Passes props down to year picker control based on date |
| headerControlsOrder | ("next" \| "previous" \| "level")[] | - | Controls order |
| hideOutsideDates | boolean | - | Determines whether outside dates should be hidden |
| hideWeekdays | boolean | - | Determines whether weekdays row should be hidden |
| highlightToday | boolean | - | Determines whether today should be highlighted with a border |
| inputContainer | (children: ReactNode) => ReactNode | - | Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. |
| inputSize | string | - | HTML `size` attribute for the input element (number of visible characters) |
| inputWrapperOrder | ("input" \| "label" \| "description" \| "error")[] | - | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |
| label | React.ReactNode | - | Contents of `Input.Label` component. If not set, label is not displayed. |
| labelProps | InputLabelProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Label` component |
| labelSeparator | string | - | Separator between range value |
| leftSection | React.ReactNode | - | Content section displayed on the left side of the input |
| leftSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| leftSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `leftSection` element |
| leftSectionWidth | React.CSSProperties["width"] | - | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |
| level | "month" \| "year" \| "decade" | - | Current displayed level (controlled) |
| loaderProps | LoaderProps | - | Props passed down to the `Loader` component displayed when `loading` prop is set |
| loading | boolean | - | Displays loading indicator in the left or right section |
| loadingPosition | "left" \| "right" | - | Position of the loading indicator |
| locale | string | - | Dayjs locale, defaults to value defined in DatesProvider |
| maxDate | string \| Date | - | Maximum possible date in `YYYY-MM-DD` format or Date object |
| maxLevel | "month" \| "year" \| "decade" | - | Max level that user can go up to |
| minDate | string \| Date | - | Minimum possible date in `YYYY-MM-DD` format or Date object |
| modalProps | Partial<Omit<ModalProps, "children">> | - | Props passed down to `Modal` component |
| monthLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display month label or a function that returns month label based on month value |
| monthsListFormat | string \| ((date: string) => string) | - | `dayjs` format for months list or a function that returns month label based on the date value |
| nextIcon | React.ReactNode | - | Change next icon |
| nextLabel | string | - | Next button `aria-label` |
| numberOfColumns | number | - | Number of columns displayed next to each other |
| onChange | (value: DatePickerValue<Type, string>) => void | - | Called when value changes |
| onDateChange | (date: string) => void | - | Called when date changes |
| onDropdownClose | () => void | - | Called when the dropdown is closed |
| onLevelChange | (level: CalendarLevel) => void | - | Called when level changes |
| onMonthMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void | - | Called when mouse enters month control |
| onMonthSelect | (date: string) => void | - | Called when user selects month |
| onNextDecade | (date: string) => void | - | Called when the next decade button is clicked |
| onNextMonth | (date: string) => void | - | Called when the next month button is clicked |
| onNextYear | (date: string) => void | - | Called when the next year button is clicked |
| onPreviousDecade | (date: string) => void | - | Called when the previous decade button is clicked |
| onPreviousMonth | (date: string) => void | - | Called when the previous month button is clicked |
| onPreviousYear | (date: string) => void | - | Called when the previous year button is clicked |
| onYearMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: string) => void | - | Called when mouse enters year control |
| onYearSelect | (date: string) => void | - | Called when user selects year |
| placeholder | string | - | Input placeholder |
| pointer | boolean | - | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). |
| popoverProps | Partial<Omit<PopoverProps, "children">> | - | Props passed down to `Popover` component |
| presets | WeekPickerPreset<Type>[] | - | Predefined values to pick from |
| previousIcon | React.ReactNode | - | Change previous icon |
| previousLabel | string | - | Previous button `aria-label` |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| readOnly | boolean | - | If set, the component value cannot be changed by the user |
| renderDay | (date: string) => React.ReactNode | - | Controls day value rendering |
| required | boolean | - | Adds required attribute to the input and a red asterisk on the right side of label |
| rightSection | React.ReactNode | - | Content section displayed on the right side of the input |
| rightSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| rightSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `rightSection` element |
| rightSectionWidth | React.CSSProperties["width"] | - | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |
| size | MantineSize | - | Component size |
| sortDates | boolean | - | Determines whether dates values should be sorted before `onChange` call, only applicable with type="multiple" |
| success | React.ReactNode | - | Contents of `Input.Success` component. If not set, success is not displayed. |
| successProps | InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Success` component |
| type | "range" \| "multiple" \| "default" | - | Picker type: range, multiple or default |
| value | DateValue \| DatesRangeValue<DateValue> \| DateValue[] | - | Value for controlled component |
| valueFormat | string | - | `dayjs` format applied to the start and end dates of the week |
| valueFormatter | DateFormatter | - | A function to format selected dates values into a string. By default, date is formatted based on the input type. |
| weekdayFormat | string \| ((date: string) => string) | - | `dayjs` format for weekdays names |
| weekendDays | (0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6)[] | - | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |
| withAsterisk | boolean | - | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |
| withCellSpacing | boolean | - | Determines whether controls should be separated |
| withErrorStyles | boolean | - | Determines whether the input should have red border and red text color when the `error` prop is set |
| withNativeLevelSelect | boolean | - | Determines whether level select controls should be rendered as native `<select>` elements |
| withSuccessStyles | boolean | - | Determines whether the input should have green border when the `success` prop is set |
| wrapperProps | WrapperProps | - | Props passed down to the root element |
| yearLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display year label or a function that returns year label based on year value |
| yearsListFormat | string \| ((date: string) => string) | - | `dayjs` format for years list or a function that returns year label based on the date value |
| yearsSelectRange | [number, number] | - | Year range for native level select, tuple of `[startYear, endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or values derived from `minDate`/`maxDate` if set. |


#### Styles API

WeekPicker component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**WeekPicker selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| calendarHeader | .mantine-WeekPicker-calendarHeader | Calendar header root element |
| calendarHeaderControl | .mantine-WeekPicker-calendarHeaderControl | Previous/next calendar header controls |
| calendarHeaderControlIcon | .mantine-WeekPicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
| calendarHeaderLevel | .mantine-WeekPicker-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
| levelsGroup | .mantine-WeekPicker-levelsGroup | Group of months levels |
| yearsList | .mantine-WeekPicker-yearsList | Years list table element |
| yearsListRow | .mantine-WeekPicker-yearsListRow | Years list row element |
| yearsListCell | .mantine-WeekPicker-yearsListCell | Years list cell element |
| yearsListControl | .mantine-WeekPicker-yearsListControl | Button used to pick months and years |
| monthsList | .mantine-WeekPicker-monthsList | Months list table element |
| monthsListRow | .mantine-WeekPicker-monthsListRow | Months list row element |
| monthsListCell | .mantine-WeekPicker-monthsListCell | Months list cell element |
| monthsListControl | .mantine-WeekPicker-monthsListControl | Button used to pick months and years |
| monthThead | .mantine-WeekPicker-monthThead | thead element of month table |
| monthRow | .mantine-WeekPicker-monthRow | tr element of month table |
| monthTbody | .mantine-WeekPicker-monthTbody | tbody element of month table |
| monthCell | .mantine-WeekPicker-monthCell | td element of month table |
| month | .mantine-WeekPicker-month | Month table element |
| weekdaysRow | .mantine-WeekPicker-weekdaysRow | Weekdays tr element |
| weekday | .mantine-WeekPicker-weekday | Weekday th element |
| day | .mantine-WeekPicker-day | Month day control |
| weekNumber | .mantine-WeekPicker-weekNumber | Week number td element |
| weekControl | .mantine-WeekPicker-weekControl | Week control button inside week number cell, rendered only in WeekPicker |
| weekPickerRoot | .mantine-WeekPicker-weekPickerRoot | Week picker root element, contains calendar and presets |
| presetsList | .mantine-WeekPicker-presetsList | Presets wrapper element |
| presetButton | .mantine-WeekPicker-presetButton | Preset button |

**WeekPicker CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| weekPickerRoot | --preset-font-size | Controls font size of preset buttons |

**WeekPicker data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| day | data-week-hovered | Day belongs to the hovered week | - |
| weekControl | data-selected | Week is selected | - |
| weekControl | data-disabled | Every day of the week is disabled | - |

**WeekPickerinput selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| calendarHeader | .mantine-WeekPickerinput-calendarHeader | Calendar header root element |
| calendarHeaderControl | .mantine-WeekPickerinput-calendarHeaderControl | Previous/next calendar header controls |
| calendarHeaderControlIcon | .mantine-WeekPickerinput-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
| calendarHeaderLevel | .mantine-WeekPickerinput-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
| levelsGroup | .mantine-WeekPickerinput-levelsGroup | Group of months levels |
| yearsList | .mantine-WeekPickerinput-yearsList | Years list table element |
| yearsListRow | .mantine-WeekPickerinput-yearsListRow | Years list row element |
| yearsListCell | .mantine-WeekPickerinput-yearsListCell | Years list cell element |
| yearsListControl | .mantine-WeekPickerinput-yearsListControl | Button used to pick months and years |
| monthsList | .mantine-WeekPickerinput-monthsList | Months list table element |
| monthsListRow | .mantine-WeekPickerinput-monthsListRow | Months list row element |
| monthsListCell | .mantine-WeekPickerinput-monthsListCell | Months list cell element |
| monthsListControl | .mantine-WeekPickerinput-monthsListControl | Button used to pick months and years |
| monthThead | .mantine-WeekPickerinput-monthThead | thead element of month table |
| monthRow | .mantine-WeekPickerinput-monthRow | tr element of month table |
| monthTbody | .mantine-WeekPickerinput-monthTbody | tbody element of month table |
| monthCell | .mantine-WeekPickerinput-monthCell | td element of month table |
| month | .mantine-WeekPickerinput-month | Month table element |
| weekdaysRow | .mantine-WeekPickerinput-weekdaysRow | Weekdays tr element |
| weekday | .mantine-WeekPickerinput-weekday | Weekday th element |
| day | .mantine-WeekPickerinput-day | Month day control |
| weekNumber | .mantine-WeekPickerinput-weekNumber | Week number td element |
| weekControl | .mantine-WeekPickerinput-weekControl | Week control button inside week number cell, rendered only in WeekPicker |
| weekPickerRoot | .mantine-WeekPickerinput-weekPickerRoot | Week picker root element, contains calendar and presets |
| presetsList | .mantine-WeekPickerinput-presetsList | Presets wrapper element |
| presetButton | .mantine-WeekPickerinput-presetButton | Preset button |
| placeholder | .mantine-WeekPickerinput-placeholder | Placeholder element |