DateInput

DateInput

자유 형식(free form)의 날짜 입력 컴포넌트예요. 사용자가 캘린더에서 선택하거나 직접 문자열로 날짜를 입력할 수 있어요.

출처: 문서

본문

DatePicker props

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

사용법 (Usage)

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

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateInput
      value={value}
      onChange={setValue}
      label="Date input"
      placeholder="Date input"
    />
  );
}

사전 설정 (Presets)

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

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

function Demo() {
  return (
    <DateInput
      defaultValue={new Date()}
      label="With presets"
      presets={[
        { label: 'Yesterday', date: dayjs().subtract(1, 'day').toDate() },
        { label: 'Today', date: new Date() },
        { label: 'Tomorrow', date: dayjs().add(1, 'day').toDate() },
      ]}
    />
  );
}

값 형식 (Value format)

valueFormat prop으로 값 라벨의 dayjs format을 바꿀 수 있어요. 일부 커스텀 형식을 사용하려면 custom parse format 플러그인을 활성화해야 해요.

// 애플리케이션 루트 파일에서 한 번만 해요
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

커스텀 형식으로 DateInput을 사용하는 예시:

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

function Demo() {
  return <DateInput valueFormat="DD/MM/YYYY" label="Date input" placeholder="Date input" />;
}

valueFormat은 값이 YYYY-MM-DD 문자열일 때 함수를 받아 서식화된 값을 반환하기도 해요. dayjs 대신 Intl.DateTimeFormat으로 값을 서식 지정하는 데 사용해요. dayjs 없이 서식 지정을 참고해요.

valueFormat은 사용자 입력을 파싱하는 데에도 사용된다는 점에 주의해요. 함수는 파싱에 사용할 수 없어요. valueFormat이 함수이면 입력된 값을 YYYY-MM-DD 문자열로 파싱해요. 다른 형식을 지원하려면 dateParser prop을 설정해요.

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

function Demo() {
  return (
    <DateInput
      valueFormat={(date) =>
        new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(`${date}T00:00:00`))
      }
      dateParser={(input) => {
        const parsed = new Date(input);
        return Number.isNaN(parsed.getTime()) ? null : parsed;
      }}
    />
  );
}

시간 포함 (With time)

valueFormat이 시간을 포함한다면(예: YYYY-MM-DD HH:mm), 값의 시간 부분을 유지하려면 withTime prop을 설정해요. withTime이 없으면 시간 부분은 버려지고 항상 00:00으로 기본 설정돼요. withTime을 사용할 때는 날짜-시간 문자열을 반환하는 커스텀 dateParser도 제공해야 해요.

import { useState } from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { DateInput, DateInputProps, DateStringValue } from '@mantine/dates';

// 커스텀 형식으로 날짜를 파싱하려면 dayjs를 customParseFormat 플러그인으로 확장하는 것이 필요해요
dayjs.extend(customParseFormat);

const dateParser: DateInputProps['dateParser'] = (input) => {
  if (!input) {
    return null;
  }
  const parsed = dayjs(input, 'YYYY-MM-DD HH:mm', true);
  return parsed.isValid() ? parsed.format('YYYY-MM-DD HH:mm:ss') : null;
};

function Demo() {
  const [value, setValue] = useState<DateStringValue | null>(null);
  return (
    <DateInput
      value={value}
      onChange={setValue}
      valueFormat="YYYY-MM-DD HH:mm"
      withTime
      dateParser={dateParser}
      label="Date and time input"
      placeholder="Date and time input"
    />
  );
}

날짜 파서 (Date parser)

dateParser prop으로 기본 날짜 파서를 대체할 수 있어요. 파서 함수는 사용자 입력(문자열)을 받아 Date 객체를 반환해야 해요.

import dayjs from 'dayjs';
import { DateInput, DateInputProps } from '@mantine/dates';

const dateParser: DateInputProps['dateParser'] = (input) => {
  if (input === 'WW2') {
    return '1939-09-01';
  }

  return dayjs(input, 'DD/MM/YYYY').format('YYYY-MM-DD');
};

function Demo() {
  return <DateInput label="Type WW2" dateParser={dateParser} />;
}

지우기 허용 (Allow clear)

clearable prop을 설정하면 입력에서 값을 제거할 수 있어요. 사용자가 드롭다운에서 같은 날짜를 선택하거나 입력 값을 지우면 입력이 비워져요.

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

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

• 'both' (기본) – 지우기 버튼과 rightSection 모두 렌더링해요
• 'rightSection' – 사용자가 제공한 rightSection만 렌더링하고 지우기 버튼을 무시해요
• 'clear' – 지우기 버튼만 렌더링하고 rightSection을 무시해요

import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <DateInput clearable rightSection={<CaretDownIcon size={16} />} clearSectionMode="both" />
      <DateInput clearable rightSection={<CaretDownIcon size={16} />} clearSectionMode="rightSection" />
      <DateInput clearable rightSection={<CaretDownIcon size={16} />} clearSectionMode="clear" />
    </Stack>
  );
}

최소·최대 날짜 (Min and max date)

minDate와 maxDate props로 최소·최대 날짜를 정의할 수 있어요. maxDate 이후 또는 minDate 이전의 날짜가 입력되면 유효하지 않은 것으로 간주되고, 입력 값은 마지막으로 알려진 유효한 날짜 값으로 되돌아가요.

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

function Demo() {
  return (
    <DateInput
      minDate={new Date('2025-01-01')}
      maxDate={new Date('2025-12-31')}
      placeholder="Date input"
    />
  );
}

비활성 상태 (Disabled state)

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

function Demo() {
  return <DateInput disabled />;
}

Input props

DateInput 컴포넌트는 Input과 Input.Wrapper 컴포넌트의 기능과 모든 input 요소 props를 지원해요. DateInput 문서에는 컴포넌트가 지원하는 모든 기능이 포함되어 있지 않아요. 사용 가능한 모든 기능은 Input 문서에서 확인할 수 있어요.

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

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

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

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

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

접근성 (Accessibility)

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

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

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

더 알아보기 (Learn more)

• InlineDateTimePicker
• MonthPicker
• DatePicker