Mantine UIFAQColors generator

WeekPickerInput

Week, multiple weeks and weeks range picker input

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/dates

WeekPicker props

WeekPickerInput supports most of the WeekPicker props. Read through the WeekPicker documentation to learn about all component features that are not listed on this page.

Usage

The value is a date string in YYYY-MM-DD format pointing to the first day of the selected week. The input label displays the week as a range of its first and last day:

import { useState } from 'react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <WeekPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Multiple weeks

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

import { useState } from 'react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <WeekPickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
    />
  );
}

Weeks range

Set type="range" to allow users to pick a weeks range. The label displays the range from the first day of the first week to the last day of the last week:

import { useState } from 'react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[string | null, string | null]>([null, null]);
  return (
    <WeekPickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
    />
  );
}

First day of week

firstDayOfWeek changes the calendar layout, the emitted value and the label:

import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return <WeekPickerInput firstDayOfWeek={0} label="Pick week" placeholder="Pick week" />;
}

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:

import dayjs from 'dayjs';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      label="Pick week"
      placeholder="Pick week"
      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:

import dayjs from 'dayjs';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      type="range"
      label="Pick weeks range"
      placeholder="Pick weeks range"
      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',
        },
      ]}
    />
  );
}

Open picker in modal

By default, WeekPicker is rendered inside Popover. You can change that to Modal by setting dropdownType="modal":

import { useState } from 'react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <WeekPickerInput
      dropdownType="modal"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Value format

valueFormat is a dayjs format applied to both the first and the last day of the week. The default value is MMM D, YYYY:

import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return <WeekPickerInput valueFormat="DD.MM.YYYY" label="Pick week" placeholder="Pick week" />;
}

Value formatter

valueFormatter is a more powerful alternative to the valueFormat prop. It allows formatting the value label with a custom function. The function is the same for all component types (default, multiple and range) – you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with type="multiple":

import dayjs from 'dayjs';
import { useState } from 'react';
import { WeekPickerInput, DateFormatter } from '@mantine/dates';

const formatter: DateFormatter = ({ type, date, locale, format }) => {
  if (type === 'multiple' && Array.isArray(date)) {
    if (date.length === 1) {
      return dayjs(date[0]).locale(locale).format(format);
    }

    if (date.length > 1) {
      return `${date.length} dates selected`;
    }

    return '';
  }

  return '';
};

function Demo() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <WeekPickerInput
      label="Pick 2 dates or more"
      placeholder="Pick 2 dates or more"
      value={value}
      onChange={setValue}
      type="multiple"
      valueFormatter={formatter}
    />
  );
}

getWeekFormatter(firstDayOfWeek) exported from @mantine/dates returns the default formatter. Use it in your own formatter, for example to add the ISO week number:

import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek';
import { DateFormatter, getWeekFormatter, WeekPickerInput } from '@mantine/dates';

dayjs.extend(isoWeek);

const formatter: DateFormatter = (input) => {
  if (input.type === 'default' && typeof input.date === 'string') {
    return `Week ${dayjs(input.date).isoWeek()}: ${getWeekFormatter(1)(input)}`;
  }
  return getWeekFormatter(1)(input);
};

function Demo() {
  return (
    <WeekPickerInput
      valueFormat="MMM D"
      valueFormatter={formatter}
      label="Pick week"
      placeholder="Pick week"
    />
  );
}

Clearable

Set the clearable prop to display a clear button in the right section. Note that if you set the rightSection prop, the clear button will not be displayed.

import dayjs from 'dayjs';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      clearable
      defaultValue={dayjs().format('YYYY-MM-DD')}
      label="Pick date"
      placeholder="Pick date"
    />
  );
}

Clear section mode

The clearSectionMode prop determines how the clear button and rightSection are rendered:

  • 'both' (default) – render both the clear button and rightSection
  • 'rightSection' – render only the user-supplied rightSection, ignore clear button
  • 'clear' – render only the clear button, ignore rightSection
import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <WeekPickerInput
        label="clearSectionMode='both' (default)"
        placeholder="Pick week"
        defaultValue="2026-03-02"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="both"
      />

      <WeekPickerInput
        label="clearSectionMode='rightSection'"
        placeholder="Pick week"
        defaultValue="2026-03-02"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="rightSection"
      />

      <WeekPickerInput
        label="clearSectionMode='clear'"
        placeholder="Pick week"
        defaultValue="2026-03-02"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="clear"
      />
    </Stack>
  );
}

Disabled state

import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      disabled
      label="Disabled"
      placeholder="Pick week"
      defaultValue="2026-03-02"
    />
  );
}

Min and max dates

minDate and maxDate props define the minimum and maximum dates that can be picked:

import dayjs from 'dayjs';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      label="Pick week"
      placeholder="Pick week"
      minDate={dayjs().subtract(2, 'week').format('YYYY-MM-DD')}
      maxDate={dayjs().add(2, 'week').format('YYYY-MM-DD')}
    />
  );
}

Week controls

Week numbers are the only focusable elements of the calendar, days can be clicked with the mouse only. Use getWeekControlProps to change aria-label or disable specific weeks, see WeekPicker documentation for details.

Max level

maxLevel prop allows to set the maximum level that can be reached by clicking on the label in the header.

import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return <WeekPickerInput maxLevel="year" label="Pick week" placeholder="Pick week" />;
}

Input props

WeekPickerInput component supports Input and Input.Wrapper component features and all button element props. The WeekPickerInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.

Radius
Size
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput
      placeholder="Pick date"
      label="Pick date"
      withAsterisk
    />
  );
}

With icon

import { useState } from 'react';
import { CalendarBlankIcon } from '@phosphor-icons/react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  const icon = <CalendarBlankIcon size={18} />;
  return (
    <WeekPickerInput
      leftSection={<CalendarBlankIcon size={18} />}
      leftSectionPointerEvents="none"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Native level select

import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <WeekPickerInput withNativeLevelSelect label="Pick week" placeholder="Pick week" />
  );
}

Get element ref

import { useRef } from 'react';
import { WeekPickerInput } from '@mantine/dates';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <WeekPickerInput ref={ref} />;
}

Accessibility

If WeekPickerInput is used without the label prop, it will not be announced properly by screen readers:

import { WeekPickerInput } from '@mantine/core';

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <WeekPickerInput />;
}

Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:

import { WeekPickerInput } from '@mantine/core';

// Accessible input – it has aria-label
function Demo() {
  return <WeekPickerInput aria-label="My input" />;
}

If the label prop is set, the input will be accessible and it is not required to set aria-label:

import { WeekPickerInput } from '@mantine/core';

// Accessible input – it has associated label element
function Demo() {
  return <WeekPickerInput label="My input" />;
}

WeekPicker

DateTimePicker