Date Input

분할된 키보드 입력(segmented keyboard input)을 사용해 특정 날짜를 입력할 때 사용하는 컴포넌트예요. 날짜를 부분(segments) 단위로 정밀하게 입력할 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { DateInput } from "@chakra-ui/react"

<DateInput.Root>
  <DateInput.Label />
  <DateInput.Control>
    <DateInput.SegmentGroup>
      <DateInput.Segment />
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

숏컷 (Shortcuts)

DateInput 컴포넌트는 흔한 패턴을 위한 편리한 숏컷도 제공해요.

DateInput.Segments

DateInput.Segments 숏컷은 현재 granularity와 formatter가 만드는 모든 세그먼트를 포함하는 세그먼트 그룹을 렌더링해요.

<DateInput.SegmentGroup>
  {dateInput.getSegments().map((segment, index) => (
    <DateInput.Segment key={index} segment={segment} />
  ))}
</DateInput.SegmentGroup>

각 세그먼트를 커스터마이즈할 필요가 없다면 다음과 같이 더 간결할 수 있어요:

<DateInput.Segments />

날짜 값 (Date Value)

날짜 값은 @internationalized/date의 객체를 사용해 제공되며, 시간대 안전(timezone-safe)하고 로케일 인식(locale-aware) 날짜 처리를 담당해요.

이것은 Temporal API가 브라우저에서 널리 지원될 때 대체될 예정이에요.

예시 (Examples)

크기 (Sizes)

size prop을 사용하면 데이트 인풋의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용하면 데이트 인풋의 모양을 바꿀 수 있어요.

비활성화 (Disabled)

disabled prop을 사용하면 데이트 인풋과의 사용자 상호작용을 막을 수 있어요.

유효하지 않음 (Invalid)

invalid prop을 사용하면 데이트 인풋 값이 유효하지 않음을 나타낼 수 있어요.

읽기 전용 (Read Only)

readOnly prop을 사용하면 값을 유지하면서 수정을 막을 수 있어요.

제어 (Controlled)

value와 onValueChange prop을 사용하면 날짜 값을 제어할 수 있어요.

기본값 (Default Value)

defaultValue prop을 사용하면 제어하지 않고 초기 날짜를 설정할 수 있어요.

최소/최대 (Min and Max)

min과 max prop을 사용하면 허용되는 날짜 범위를 제한할 수 있어요.

선행 0 (Leading Zeros)

shouldForceLeadingZeros prop을 사용하면 일(day)과 월(month) 세그먼트를 항상 두 자리로 렌더링할 수 있어요.

세분성 (Granularity)

granularity prop을 사용하면 표시할 필드를 제어할 수 있어요. hour, minute, second로 설정하면 날짜와 함께 시간도 입력할 수 있어요.

시간 전용 (Time Only)

granularity와 formatter prop을 사용하면 시간 전용 입력을 구성할 수 있어요.

시간대 (Time Zone)

ZonedDateTime 값은 시간대 세그먼트를 렌더링해요. hourCycle을 사용하면 12시간/24시간 표기를 전환할 수 있고, hideTimeZone을 사용하면 세그먼트를 숨길 수 있어요.

범위 (Range)

selectionMode prop을 "range"로 설정하면 시작/종료 날짜를 입력할 수 있어요. DateInput.Segments와 DateInput.HiddenInput에 index prop을 전달해 범위의 각 날짜를 대상으로 지정해요.

클리어 트리거 (Clear Trigger)

useDateInputContext 훅을 clearValue 메서드와 결합하면 값이 있을 때 클리어 트리거를 렌더링할 수 있어요.

데이트 피커 (Date Picker)

useDateInput 훅과 DateInput.RootProvider 컴포넌트를 사용해 데이트 인풋을 DatePicker 컴포넌트와 구성할 수 있어요. 이렇게 하면 캘린더 트리거와 함께 분할 키보드 입력을 제공해요.

React Hook Form

Controller 패턴을 사용해 react-hook-form과 통합하는 예시예요.

로케일 (Locale)

locale prop을 사용하면 세그먼트의 순서와 형식을 바꿀 수 있어요.

RTL

데이트 인풋을 LocaleProvider로 감싸 로케일과 텍스트 방향을 함께 설정할 수 있어요. dir="rtl"을 직접 전달하면 방향만 따로 재정의할 수 있어요.

Props

Root

DateInput 컴포넌트의 Root 부분에 전달할 수 있는 prop을 확인해 주세요.

RootProvider

DateInput 컴포넌트의 RootProvider 부분에 전달할 수 있는 prop을 확인해 주세요.

Segments

DateInput 컴포넌트의 Segments 부분에 전달할 수 있는 prop을 확인해 주세요.

Segment

DateInput 컴포넌트의 Segment 부분에 전달할 수 있는 prop을 확인해 주세요.

HiddenInput

DateInput 컴포넌트의 HiddenInput 부분에 전달할 수 있는 prop을 확인해 주세요.

더 알아보기 (Learn more)

Chakra UI의 Date Input 컴포넌트에 대해 더 자세히 알아보려면 공식 문서와 Ark UI Date Input 문서를 확인해 보세요.