Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

DateTimePicker

Capture datetime from the user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

DatePicker props

DateTimePicker supports most of the DatePicker props, read through 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" />;
}

Value format

Use valueFormat prop to change dayjs format of 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 components features and all button element props. DateTimePicker documentation does not include all features supported by the component – see 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 clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

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

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

Open picker in modal

By default, 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 label prop, it will not be announced properly by screen reader:

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 label will not be visible, but screen reader will announce it:

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

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

If label prop is set, input will be accessible 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" />;
}

Previous

DateInput

Next

DatePicker

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people