Mantine UIFAQColors generator

InlineDateTimePicker

Inline date and time picker with range support

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/dates

DatePicker props

InlineDateTimePicker 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

InlineDateTimePicker renders a calendar with a time picker inline, without a dropdown. It combines DatePicker and TimePicker components:

MoTuWeThFrSaSu
:
import { InlineDateTimePicker } from '@mantine/dates';

function Demo() {
  return <InlineDateTimePicker />;
}

With seconds

Set withSeconds prop to display seconds input in the time picker:

MoTuWeThFrSaSu
::
import { InlineDateTimePicker } from '@mantine/dates';

function Demo() {
  return <InlineDateTimePicker withSeconds />;
}

Range

Set type="range" to allow selecting a date and time range. In range mode, two time inputs are rendered side by side, and a range summary is displayed below the time inputs:

MoTuWeThFrSaSu

:
:
import { InlineDateTimePicker } from '@mantine/dates';

function Demo() {
  return <InlineDateTimePicker type="range" />;
}

Controlled range

MoTuWeThFrSaSu

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

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

  return (
    <InlineDateTimePicker
      type="range"
      value={value}
      onChange={setValue}
    />
  );
}

Value format

Use valueFormat prop to change the dayjs format of the range preview:

MoTuWeThFrSaSu

:
:
import { InlineDateTimePicker } from '@mantine/dates';

function Demo() {
  return <InlineDateTimePicker type="range" valueFormat="MMMM YYYY, DD HH:mm" />;
}

DateTimePicker

DateInput