DateTimePicker

DateTimePicker

사용자로부터 날짜·시간(datetime)을 입력받는 컴포넌트예요.

출처: 문서

본문

DatePicker props

DateTimePicker는 DatePicker의 대부분의 props를 지원해요. 이 페이지에 나열되지 않은 컴포넌트 기능을 확인하려면 DatePicker 문서를 읽어보세요.

사용법 (Usage)

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

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

범위 (Range)

type="range"를 설정하면 날짜·시간 범위를 선택할 수 있어요. 범위 모드에서는 시작·끝 시간을 위한 두 개의 시간 입력이 렌더링되고, 아래에 범위 요약이 표시돼요.

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

function Demo() {
  return <DateTimePicker type="range" label="Pick dates and times range" placeholder="Pick dates and times range" />;
}

초 포함 (With seconds)

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

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

사전 설정 (Presets)

presets prop으로 커스텀 날짜 사전 설정을 추가할 수 있어요. 사전 설정은 캘린더 옆에 표시돼요.

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      defaultValue={new Date()}
      presets={[{ label: 'Today', date: new Date() }, { label: 'Tomorrow', date: dayjs().add(1, 'day').toDate() }]}
    />
  );
}

TimePicker props

timePickerProps prop으로 기반 TimePicker 컴포넌트에 props를 전달할 수 있어요. 시간 피커의 드롭다운 활성화와 12h 형식 설정 예시:

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

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

값 형식 (Value format)

valueFormat prop으로 값 라벨의 dayjs format을 바꿀 수 있어요.

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

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

valueFormat은 값이 YYYY-MM-DD HH:mm:ss 문자열일 때 함수를 받아 커스텀 서식화된 값을 반환하기도 해요. dayjs 형식 문자열로 표현할 수 없는 서식 로직일 때 사용해요.

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

function Demo() {
  return (
    <DateTimePicker
      valueFormat={(date) => dayjs(date).format('dddd, MMMM D [at] h:mm A')}
      defaultValue="2024-04-11 14:45:00"
      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 컴포넌트는 Input과 Input.Wrapper 컴포넌트의 기능과 모든 button 요소 props를 지원해요. DateTimePicker 문서에는 컴포넌트가 지원하는 모든 기능이 포함되어 있지 않아요. 사용 가능한 모든 기능은 Input 문서에서 확인할 수 있어요.

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

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

지우기 가능 (Clearable)

clearable prop을 설정하면 오른쪽 섹션에 지우기 버튼을 표시해요. rightSection prop을 설정하면 지우기 버튼이 표시되지 않는다는 점에 주의해요.

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

function Demo() {
  return <DateTimePicker label="Pick date and time" defaultValue="2026-09-26 00:00" clearable />;
}

지우기 섹션 모드 (Clear section mode)

clearSectionMode prop은 지우기 버튼과 rightSection이 어떻게 렌더링되는지 결정해요.

  • 'both' (기본) – 지우기 버튼과 rightSection 모두 렌더링해요
  • 'rightSection' – 사용자가 제공한 rightSection만 렌더링하고 지우기 버튼을 무시해요
  • 'clear' – 지우기 버튼만 렌더링하고 rightSection을 무시해요
import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <DateTimePicker clearable defaultValue="2026-09-26 08:56" rightSection={<CaretDownIcon size={16} />} clearSectionMode="both" />
      <DateTimePicker clearable defaultValue="2026-09-26 08:56" rightSection={<CaretDownIcon size={16} />} clearSectionMode="rightSection" />
      <DateTimePicker clearable defaultValue="2026-09-26 08:56" rightSection={<CaretDownIcon size={16} />} clearSectionMode="clear" />
    </Stack>
  );
}

모달에서 피커 열기 (Open picker in modal)

기본적으로 피커는 Popover 안에 렌더링돼요. dropdownType="modal"을 설정하면 Modal로 바꿀 수 있어요.

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

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

네이티브 레벨 선택 (Native level select)

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

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

요소 ref 가져오기 (Get element ref)

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

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

접근성 (Accessibility)

DateTimePicker을 label prop 없이 사용하면 화면 판독기가 제대로 알려주지 못해요. aria-label을 설정하면 라벨이 보이지 않아도 화면 판독기가 알려줘요. label prop을 설정하면 별도로 aria-label을 지정할 필요 없이 접근성이 확보돼요.

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

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

더 알아보기 (Learn more)