Date Input

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

export default function DateInputDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/date-input.json

사용법

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

<DateInput name="birthDate" label="생년월일" description="YYYY.MM.DD 형식으로 입력하세요." />

KRDS 정렬

DateInput은 field, input-group, popover, calendar, button을 조합한 KRDS 날짜 입력 패턴입니다. Calendar/Field primitive를 변경하지 않고 수동 입력과 달력 선택을 하나의 wrapper로 제공합니다.

구성

다음 조합으로 DateInput를 사용할 수 있습니다.

DateInput

예제

Basic

직접 입력과 달력 선택을 함께 제공하는 날짜 입력 컴포넌트입니다.

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

export default function DateInputDemo() {

API 참조