InlineDateTimePicker

InlineDateTimePicker

범위 지원이 있는 인라인 날짜·시간 피커 컴포넌트예요. 드롭다운 없이 캘린더와 시간 피커를 인라인으로 렌더링해요.

출처: 문서

본문

DatePicker props

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

사용법 (Usage)

InlineDateTimePicker는 드롭다운 없이 캘린더와 시간 피커를 인라인으로 렌더링해요. DatePicker와 TimePicker 컴포넌트를 결합해요.

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

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

초 포함 (With seconds)

withSeconds prop을 설정하면 시간 피커에 초 입력을 표시해요.

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

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

범위 (Range)

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

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

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

제어된 범위 (Controlled range)

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

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

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

값 형식 (Value format)

valueFormat prop으로 범위 미리보기의 dayjs format을 바꿀 수 있어요.

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

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

더 알아보기 (Learn more)

• DateTimePicker
• DateInput
• TimePicker