Date Picker

입력처럼 보이는 버튼에서 달력을 열어 날짜를 고르는 간결한 구성에 사용합니다.

미리보기

마감일 선택과 초기화

범위가 제한된 마감일을 선택하거나 지우고 초기값으로 되돌리며 비활성 상태도 비교합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/date-picker

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

마감일 선택과 초기화

npx shadcn@latest add @neumorphism-ui/date-picker @neumorphism-ui/button

Registry JSON

사용법

레이블과 value, onValueChange를 제공하세요. 지역화한 문구와 날짜 제약, 도움말을 설정하고 값 지우기와 폼 초기화 동작은 앱에서 정합니다.

"use client";

import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <DatePicker label="Due date" name="dueDate" value={date} onValueChange={setDate} />;
}

API 레퍼런스

상위 컴포넌트가 선택 값을 관리합니다. name을 지정하면 숨겨진 입력에 현지 날짜를 YYYY-MM-DD 형식으로 기록하며 UTC 변환으로 날짜가 바뀌지 않습니다. 예제의 초기화도 상위 상태를 갱신합니다.

컴포넌트	속성	타입	기본값	설명
`DatePicker`	`value / onValueChange`	`Date \| undefined / callback`	`—`	현재 날짜와 변경 콜백입니다. 빈 값은 undefined입니다.
`DatePicker`	`label / name / describedBy`	`string`	`—`	버튼 이름, 폼 필드 이름, 설명 요소 ID입니다.
`DatePicker`	`disabledDates / startMonth / endMonth`	`Matcher \| Matcher[] / Date`	`—`	선택 불가 날짜와 달력 이동 범위를 지정합니다.

미리보기

마감일 선택과 초기화

설치

사용법

API 레퍼런스

접근성