날짜 입력 필드

날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.

날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.

사용 지침

신청 기간·예약일 등 정확한 날짜 입력이 필요한 폼에 사용하고, 형식 마스크(YYYY-MM-DD)와 달력 보조 트리거를 함께 제공해 키보드·마우스 사용자를 모두 지원합니다.

예제

Default

examples/date-input/DateInputDefault.tsx
"use client"

import { DateInput } from "@/components/ui/dynamic/date-input"

With Hint

도움말

examples/date-input/DateInputWithHint.tsx
"use client"

import { DateInput } from "@/components/ui/dynamic/date-input"

With Default Value

examples/date-input/DateInputWithDefaultValue.tsx
"use client"

import { DateInput } from "@/components/ui/dynamic/date-input"

Controlled

입력된 날짜: 2024.12.25
examples/date-input/DateInputControlled.tsx
"use client"

import * as React from "react"

All States

날짜를 선택해주세요.

올바른 날짜입니다.
YYYY.MM.DD 형식으로 입력해주세요.
examples/date-input/DateInputAllStates.tsx
"use client"

import { DateInput } from "@/components/ui/dynamic/date-input"

속성

이름타입기본값설명
aria-labelstring—Defines a string value that labels the current element. @see aria-labelledby.
calendarPositionenumbottom—
cancelButtonTextstring취소—
classNamestring——
confirmButtonTextstring확인—
defaultIsCalendarOpenbooleanfalse—
defaultValuestring——
disabledboolean——
disabledDatesstring[]——
errorReactNode——
eventDatesstring[]——
hintReactNode——
idstring——
informationReactNode——
isCalendarOpenboolean——
labelstring——
monthSelectLabelstring월 선택—
nextButtonLabelstring다음 달—
onCalendarOpenChange((isOpen: boolean) => void)——
onCancel(() => void)——
onChange((value: string) => void)——
onClickMouseEventHandler<HTMLInputElement>——
onConfirm(() => void)——
onMonthChange((month: number) => void)——
onTodayClick(() => void)——
onYearChange((year: number) => void)——
openButtonLabelstring달력 열기—
prevButtonLabelstring이전 달—
readOnlybooleanfalse—
sizeenumlarge—
styleCSSProperties——
successReactNode——
tabIndexnumber——
todayButtonTextstring오늘—
valuestring——
yearSelectLabelstring연도 선택—