Mantine UIFAQColors generator

DateTimePicker

Capture datetime from the user

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/dates

DatePicker props

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

Usage

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

function Demo() {
  return <DateTimePicker label="Pick date and time" placeholder="Pick date and time" />;
}

With seconds

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

function Demo() {
  return <DateTimePicker withSeconds label="Pick date and time" placeholder="Pick date and time" />;
}

Presets

Use the presets prop to add custom date presets. Presets are displayed next to the calendar:

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      presets={[
        { value: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), label: 'Yesterday' },
        { value: dayjs().format('YYYY-MM-DD HH:mm:ss'), label: 'Today' },
        { value: dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss'), label: 'Tomorrow' },
        { value: dayjs().add(1, 'month').format('YYYY-MM-DD HH:mm:ss'), label: 'Next month' },
        { value: dayjs().add(1, 'year').format('YYYY-MM-DD HH:mm:ss'), label: 'Next year' },
        {
          value: dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),
          label: 'Last month',
        },
        { value: dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), label: 'Last year' },
      ]}
    />
  );
}

TimePicker props

You can pass props down to the underlying TimePicker component with the timePickerProps prop. Example of enabling dropdown and setting 12h format for the time picker:

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      timePickerProps={{
        withDropdown: true,
        popoverProps: { withinPortal: false },
        format: '12h',
      }}
    />
  );
}

Value format

Use the valueFormat prop to change the dayjs format of the value label:

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

function Demo() {
  return (
    <DateTimePicker
      valueFormat="DD MMM YYYY hh:mm A"
      label="Pick date and time"
      placeholder="Pick date and time"
    />
  );
}

Disabled state

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

function Demo() {
  return <DateTimePicker label="Disabled" placeholder="Pick date and time" disabled />;
}

Input props

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

Input description

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

function Demo() {
  return (
    <DateTimePicker
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

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 { DateTimePicker } from '@mantine/dates';

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

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 { DateTimePicker } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <DateTimePicker
        label="clearSectionMode='both' (default)"
        placeholder="Pick date and time"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="both"
      />

      <DateTimePicker
        label="clearSectionMode='rightSection'"
        placeholder="Pick date and time"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="rightSection"
      />

      <DateTimePicker
        label="clearSectionMode='clear'"
        placeholder="Pick date and time"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="clear"
      />
    </Stack>
  );
}

Open picker in modal

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

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

function Demo() {
  return (
    <DateTimePicker
      dropdownType="modal"
      label="Pick date and time"
      placeholder="Pick date and time"
    />
  );
}

Get element ref

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

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

Accessibility

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

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

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

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

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

// Accessible input – it has aria-label
function Demo() {
  return <DateTimePicker 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 { DateTimePicker } from '@mantine/core';

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

DatePickerInput

DateInput