# MaskedDateInput
Package: @mantine/dates
Import: import { MaskedDateInput } from '@mantine/dates';
Description: Masked date input with individual fields for day, month and year

## Usage

`MaskedDateInput` is similar to [TimePicker](https://mantine.dev/llms/dates-time-picker.md) but for dates.
It provides individual masked input fields for day, month, and year with an optional
calendar dropdown for date selection.

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

function Demo() {
  return <MaskedDateInput label="Date of birth" />;
}
```


## Controlled

The `MaskedDateInput` value is a string in `YYYY-MM-DD` format (for example `2000-06-15`).
When `withTime` is set, the value uses `YYYY-MM-DD HH:mm:ss` format (for example `2000-06-15 14:30:00`).
`null` is used to represent no value. The `onChange` function is called when all fields are filled
or when all fields are cleared.

```tsx
import { useState } from 'react';
import { Code } from '@mantine/core';
import { MaskedDateInput } from '@mantine/dates';

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

  return (
    <>
      <MaskedDateInput label="Date of birth" value={value} onChange={setValue} />
      <Code block mt="md">
        {value ?? 'null'}
      </Code>
    </>
  );
}
```


## With time

Set the `withTime` prop to display hours and minutes fields in addition to date fields.

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

function Demo() {
  return <MaskedDateInput label="Date and time" withTime />;
}
```


## With seconds

Set the `withSeconds` prop to display the seconds field. The `withTime` prop must also be set.

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

function Demo() {
  return <MaskedDateInput label="Date and time" withTime withSeconds />;
}
```


## 12-hour format

Set `format="12h"` to use 12-hour time format. The am/pm selector is displayed automatically.

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

function Demo() {
  return <MaskedDateInput label="Date and time" withTime format="12h" />;
}
```


## Change am/pm labels

Use the `amPmLabels` prop to customize am/pm labels:

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

function Demo() {
  return (
    <MaskedDateInput
      label="Date and time"
      withTime
      format="12h"
      amPmLabels={{ am: 'पू', pm: 'अ' }}
    />
  );
}
```


## Date separator

Use the `dateSeparator` prop to change the separator displayed between date fields. The default is `/`.

```tsx
import { Stack } from '@mantine/core';
import { MaskedDateInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <MaskedDateInput label="Dot separator" dateSeparator="." />
      <MaskedDateInput label="Dash separator" dateSeparator="-" />
      <MaskedDateInput label="Spaced slash separator" dateSeparator=" / " />
    </Stack>
  );
}
```


## Time separator

Use the `timeSeparator` prop to change the separator displayed between time fields. The default is `:`.

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

function Demo() {
  return <MaskedDateInput label="Date and time" withTime timeSeparator="." />;
}
```


## Fields order

Use the `fieldsOrder` prop to control the display order of day, month, and year fields.
The default order is `['day', 'month', 'year']`.

```tsx
import { Stack } from '@mantine/core';
import { MaskedDateInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <MaskedDateInput label="Day / Month / Year (default)" fieldsOrder={['day', 'month', 'year']} />
      <MaskedDateInput label="Month / Day / Year" fieldsOrder={['month', 'day', 'year']} />
      <MaskedDateInput label="Year / Month / Day" fieldsOrder={['year', 'month', 'day']} />
    </Stack>
  );
}
```


## Min and max dates

Set the `minDate` and `maxDate` props to restrict the selectable date range. If a value outside
the allowed range is entered, it is clamped to the nearest valid date when the input loses focus.

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

function Demo() {
  return (
    <MaskedDateInput
      label="Date of birth"
      minDate="1924-01-01"
      maxDate="2024-12-31"
    />
  );
}
```


## Allow deselect

Set the `allowDeselect` prop to allow clearing the value by clicking the selected date in the
calendar dropdown:

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

function Demo() {
  return (
    <MaskedDateInput
      label="Date of birth"
      defaultValue="2000-06-15"
      allowDeselect
    />
  );
}
```


## Without dropdown

Set `withDropdown={false}` to disable the calendar dropdown:

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

function Demo() {
  return <MaskedDateInput label="Date of birth" withDropdown={false} />;
}
```


## Dropdown position

Use `popoverProps` to pass props down to the underlying [Popover](https://mantine.dev/llms/core-popover.md) component.
For example, to always display the dropdown above the input:

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

function Demo() {
  return (
    <MaskedDateInput
      label="Date of birth"
      popoverProps={{
        position: 'top-start',
        middlewares: { flip: false, shift: false },
      }}
    />
  );
}
```


## Hours/minutes/seconds step

Use `hoursStep`, `minutesStep` and `secondsStep` props to control the increment/decrement step
for each time field when using arrow keys:

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

function Demo() {
  return (
    <MaskedDateInput
      label="Date and time"
      withTime
      withSeconds
      hoursStep={1}
      minutesStep={5}
      secondsStep={10}
    />
  );
}
```


## Paste events

By default, `MaskedDateInput` handles pasted values in `YYYY-MM-DD` and `YYYY-MM-DD HH:mm:ss`
formats. With the `pasteSplit` prop you can provide a custom paste parser that extracts day,
month, and year values from a pasted string:

```tsx
import { Code, Text } from '@mantine/core';
import { MaskedDateInput } from '@mantine/dates';

const re = /^(\\d{1,2})\\.(\\d{1,2})\\.(\\d{4})$/;

const customPasteSplit = (value: string) => {
  const match = value.match(re);
  if (!match) {
    return { day: null, month: null, year: null };
  }

  return {
    day: Number(match[1]),
    month: Number(match[2]),
    year: Number(match[3]),
  };
};

function Demo() {
  return (
    <div>
      <MaskedDateInput label="Paste date here" pasteSplit={customPasteSplit} />
      <Text mt="md">
        Try pasting a date in DD.MM.YYYY format. For example, try pasting{' '}
        <Code>15.06.2000</Code>
      </Text>
    </div>
  );
}
```


## Clearable

Set the `clearable` prop to display a clear button in the right section of the input.

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

function Demo() {
  return <MaskedDateInput label="Date of birth" clearable defaultValue="2000-06-15" />;
}
```


```tsx
import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { MaskedDateInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <MaskedDateInput
        label="clearSectionMode='both' (default)"
        defaultValue="2000-06-15"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="both"
      />

      <MaskedDateInput
        label="clearSectionMode='rightSection'"
        defaultValue="2000-06-15"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="rightSection"
      />

      <MaskedDateInput
        label="clearSectionMode='clear'"
        defaultValue="2000-06-15"
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="clear"
      />
    </Stack>
  );
}
```


## Disabled

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

function Demo() {
  return <MaskedDateInput label="Date of birth" disabled />;
}
```


## Read only

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

function Demo() {
  return <MaskedDateInput label="Date of birth" defaultValue="2000-06-15" readOnly />;
}
```


## Input props

MaskedDateInput component supports [Input](https://mantine.dev/core/input) and [Input.Wrapper](https://mantine.dev/core/input) components features and all div element props. MaskedDateInput documentation does not include all features supported by the component – see [Input](https://mantine.dev/core/input) documentation to learn about all available features.

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


function Demo() {
  return (
    <MaskedDateInput
       variant="default" size="sm" radius="md" label="Input label" withAsterisk={false} description="Input description" error=""
    />
  );
}
```


## Get refs

Use `dayRef`, `monthRef`, `yearRef`, `hoursRef`, `minutesRef`, `secondsRef` and `amPmRef` props
to get refs of the inner inputs:

```tsx
import { useRef } from 'react';
import { MaskedDateInput } from '@mantine/dates';

function Demo() {
  const dayRef = useRef<HTMLInputElement>(null);
  const monthRef = useRef<HTMLInputElement>(null);
  const yearRef = useRef<HTMLInputElement>(null);

  return (
    <MaskedDateInput
      dayRef={dayRef}
      monthRef={monthRef}
      yearRef={yearRef}
    />
  );
}
```

## onFocus and onBlur

`onFocus` is called when one of the inputs receives focus and `onBlur` is called when focus
leaves all inputs:

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

function Demo() {
  return (
    <MaskedDateInput
      onFocus={() => console.log('Focused')}
      onBlur={() => console.log('Blurred')}
    />
  );
}
```

## Accessibility

Each field has an English `aria-label` by default (Day, Month, Year, Hours, Minutes, Seconds, AM/PM),
and the fields are grouped under the `label`. Use the corresponding props to translate the labels.
Also set an `aria-label` for the clear button if `clearable` is used:

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

function Demo() {
  return (
    <MaskedDateInput
      label="Fecha de nacimiento"
      dayInputLabel="Día"
      monthInputLabel="Mes"
      yearInputLabel="Año"
      clearButtonProps={{ 'aria-label': 'Borrar fecha' }}
    />
  );
}
```

Keyboard interactions:


#### Props

**MaskedDateInput props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| allowDeselect | boolean | - | If set, the value can be deselected by clicking the selected date in the calendar dropdown |
| amPmInputLabel | string | - | `aria-label` of am/pm input |
| amPmLabels | { am: string; pm: string; } | - | Labels used for am/pm values |
| amPmRef | Ref<HTMLSelectElement> | - | Ref to am/pm select element |
| amPmSelectProps | ClassAttributes<HTMLSelectElement> & SelectHTMLAttributes<HTMLSelectElement> & DataAttributes | - | Props passed to am/pm select |
| ariaLabels | CalendarAriaLabels | - | `aria-label` attributes for controls on different levels |
| clearButtonProps | CloseButtonProps | - | Props passed to clear button |
| clearSectionMode | ClearSectionMode | - | Determines how the clear button and rightSection are rendered |
| clearable | boolean | - | Determines whether the clear button should be displayed |
| 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 |
| dateSeparator | string | - | Separator displayed between date fields |
| dayInputLabel | string | - | `aria-label` of day input |
| dayInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to day input |
| dayPlaceholder | string | - | Day input placeholder |
| dayRef | Ref<HTMLInputElement> | - | Ref to day input element |
| 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 |
| defaultValue | string \| null | - | Uncontrolled component default value |
| 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 | - | If set, the component becomes disabled |
| 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 |
| fieldsOrder | ("month" \| "day" \| "year")[] | - | Order of date fields |
| firstDayOfWeek | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | - | Number 0-6, where 0 – Sunday and 6 – Saturday. |
| form | string | - | `form` prop passed down to the hidden input |
| format | "24h" \| "12h" | - | Time format, 24h or 12h |
| fullWidth | boolean | - | Determines whether the calendar 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 |
| getYearControlProps | (date: string) => Partial<PickerControlProps> & DataAttributes | - | Passes props down to year picker control based on date |
| hasNextLevel | boolean | - | Determines whether next level button should be enabled |
| headerControlsOrder | ("next" \| "previous" \| "level")[] | - | Controls order |
| hiddenInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to hidden input |
| 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 |
| hoursInputLabel | string | - | `aria-label` of hours input |
| hoursInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to hours input |
| hoursPlaceholder | string | - | Hours input placeholder |
| hoursRef | Ref<HTMLInputElement> | - | Ref to hours input element |
| hoursStep | number | - | Number by which hours are incremented/decremented |
| 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 |
| 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 |
| 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 |
| minDate | string \| Date | - | Minimum possible date in `YYYY-MM-DD` format or Date object |
| minutesInputLabel | string | - | `aria-label` of minutes input |
| minutesInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to minutes input |
| minutesPlaceholder | string | - | Minutes input placeholder |
| minutesRef | Ref<HTMLInputElement> | - | Ref to minutes input element |
| minutesStep | number | - | Number by which minutes are incremented/decremented |
| monthInputLabel | string | - | `aria-label` of month input |
| monthInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to month input |
| monthLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display month label or a function that returns month label based on month value |
| monthPlaceholder | string | - | Month input placeholder |
| monthRef | Ref<HTMLInputElement> | - | Ref to month input element |
| monthsListFormat | string \| ((date: string) => string) | - | `dayjs` format for months list or a function that returns month label based on the date value |
| name | string | - | `name` prop passed down to the hidden input |
| nextDisabled | boolean | - | Disables next control |
| nextIcon | React.ReactNode | - | Change next icon |
| nextLabel | string | - | Next button `aria-label` |
| numberOfColumns | number | - | Number of columns displayed next to each other |
| onBlur | (event: FocusEvent<HTMLDivElement, Element>) => void | - | Called once when focus leaves all inputs |
| onChange | (value: string \| null) => void | - | Called when value changes. Value is null when fields are incomplete. Format depends on withTime prop. |
| onDateChange | (date: string) => void | - | Called when date changes |
| onFocus | (event: FocusEvent<HTMLInputElement, Element>) => void | - | Called once when one of the inputs is focused |
| onLevelClick | () => void | - | Called when the level button is clicked |
| onNext | () => void | - | Called when the next button is clicked |
| 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 |
| onPrevious | () => void | - | Called when the previous 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 |
| pasteSplit | ((value: string) => { day: number \| null; month: number \| null; year: number \| null; hours?: number \| null; minutes?: number \| null \| undefined; seconds?: number \| null \| undefined; }) \| undefined | - | A function to transform pasted values |
| 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 | PopoverProps | - | Props passed down to Popover component |
| previousDisabled | boolean | - | Disables previous control |
| 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 value cannot be updated |
| 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 |
| secondsInputLabel | string | - | `aria-label` of seconds input |
| secondsInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to seconds input |
| secondsPlaceholder | string | - | Seconds input placeholder |
| secondsRef | Ref<HTMLInputElement> | - | Ref to seconds input element |
| secondsStep | number | - | Number by which seconds are incremented/decremented |
| size | MantineSize | - | Component size |
| 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 |
| timeSeparator | string | - | Separator displayed between time fields |
| value | string \| null | - | Controlled component value. YYYY-MM-DD format when withTime=false, YYYY-MM-DD HH:mm:ss when withTime=true. |
| 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 |
| withDropdown | boolean | - | Determines whether the calendar dropdown is displayed when input is focused |
| 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 |
| withNext | boolean | - | Determines whether next control should be rendered |
| withPrevious | boolean | - | Determines whether previous control should be rendered |
| withSeconds | boolean | - | Determines whether seconds field is displayed (requires withTime) |
| withSuccessStyles | boolean | - | Determines whether the input should have green border when the `success` prop is set |
| withTime | boolean | - | Determines whether time fields (hours, minutes) are displayed |
| withWeekNumbers | boolean | - | Determines whether week numbers should be displayed |
| wrapperProps | WrapperProps | - | Props passed down to the root element |
| yearInputLabel | string | - | `aria-label` of year input |
| yearInputProps | ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & DataAttributes | - | Props passed to year input |
| yearLabelFormat | string \| ((date: string) => string) | - | dayjs label format to display year label or a function that returns year label based on year value |
| yearPlaceholder | string | - | Year input placeholder |
| yearRef | Ref<HTMLInputElement> | - | Ref to year input element |
| 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

MaskedDateInput 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.

**MaskedDateInput selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| wrapper | .mantine-MaskedDateInput-wrapper | Root element of the Input |
| input | .mantine-MaskedDateInput-input | Input element |
| section | .mantine-MaskedDateInput-section | Left and right sections |
| bottomSection | .mantine-MaskedDateInput-bottomSection | Bottom section element, rendered inside the input border at the bottom |
| root | .mantine-MaskedDateInput-root | Root element |
| label | .mantine-MaskedDateInput-label | Label element |
| required | .mantine-MaskedDateInput-required | Required asterisk element, rendered inside label |
| description | .mantine-MaskedDateInput-description | Description element |
| error | .mantine-MaskedDateInput-error | Error element |
| success | .mantine-MaskedDateInput-success | Success element |
| calendarHeader | .mantine-MaskedDateInput-calendarHeader | Calendar header root element |
| calendarHeaderControl | .mantine-MaskedDateInput-calendarHeaderControl | Previous/next calendar header controls |
| calendarHeaderControlIcon | .mantine-MaskedDateInput-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
| calendarHeaderLevel | .mantine-MaskedDateInput-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
| levelsGroup | .mantine-MaskedDateInput-levelsGroup | Group of months levels |
| yearsList | .mantine-MaskedDateInput-yearsList | Years list table element |
| yearsListRow | .mantine-MaskedDateInput-yearsListRow | Years list row element |
| yearsListCell | .mantine-MaskedDateInput-yearsListCell | Years list cell element |
| yearsListControl | .mantine-MaskedDateInput-yearsListControl | Button used to pick months and years |
| monthsList | .mantine-MaskedDateInput-monthsList | Months list table element |
| monthsListRow | .mantine-MaskedDateInput-monthsListRow | Months list row element |
| monthsListCell | .mantine-MaskedDateInput-monthsListCell | Months list cell element |
| monthsListControl | .mantine-MaskedDateInput-monthsListControl | Button used to pick months and years |
| monthThead | .mantine-MaskedDateInput-monthThead | thead element of month table |
| monthRow | .mantine-MaskedDateInput-monthRow | tr element of month table |
| monthTbody | .mantine-MaskedDateInput-monthTbody | tbody element of month table |
| monthCell | .mantine-MaskedDateInput-monthCell | td element of month table |
| month | .mantine-MaskedDateInput-month | Month table element |
| weekdaysRow | .mantine-MaskedDateInput-weekdaysRow | Weekdays tr element |
| weekday | .mantine-MaskedDateInput-weekday | Weekday th element |
| day | .mantine-MaskedDateInput-day | Month day control |
| weekNumber | .mantine-MaskedDateInput-weekNumber | Week number td element |
| weekControl | .mantine-MaskedDateInput-weekControl | Week control button inside week number cell, rendered only in WeekPicker |
| fieldsRoot | .mantine-MaskedDateInput-fieldsRoot | A wrapper element for all field groups |
| fieldsGroup | .mantine-MaskedDateInput-fieldsGroup | A wrapper element for date/time fields |
| field | .mantine-MaskedDateInput-field | Day/month/year/hours/minutes/seconds input field |
| dateSeparator | .mantine-MaskedDateInput-dateSeparator | Separator between date fields |
| timeSeparator | .mantine-MaskedDateInput-timeSeparator | Separator between time fields |
| dropdown | .mantine-MaskedDateInput-dropdown | Popover dropdown containing calendar |