폼과 선택@neumorphism-ui/date-picker

Date Picker

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

@neumorphism-ui/date-picker

Registry JSON

미리보기

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

"use client";

import * as React from "react";
import { enUS, ko, ja, zhCN } from "@daypicker/react/locale";
import { DatePicker } from "@/components/ui/date-picker";
import { Button } from "@/components/ui/button";

Example

const locales = { en: enUS, ko, ja, zh: zhCN };
const copy = {
  en: { label: "Due date", choose: "Select date", clear: "Clear date", locked: "Locked date", reset: "Reset date", hint: "Dates are stored as local calendar dates, not UTC timestamps." },
  ko: { label: "마감일", choose: "날짜 선택", clear: "날짜 지우기", locked: "변경 불가 날짜", reset: "날짜 초기화", hint: "날짜는 UTC 시각이 아닌 현지 달력의 날짜로 저장됩니다." },
  ja: { label: "期限", choose: "日付を選択", clear: "日付をクリア", locked: "変更不可の日付", reset: "日付をリセット", hint: "UTC時刻ではなく、現地のカレンダー日付として保存します。" },
  zh: { label: "截止日期", choose: "选择日期", clear: "清除日期", locked: "锁定日期", reset: "重置日期", hint: "日期按本地日历保存，而非 UTC 时间戳。" },
};

export default function DatePickerExample({ locale = "ko" }: { locale?: keyof typeof copy }) {
  const text = copy[locale];
  const id = React.useId();
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 8, 15));
  return <form className="grid w-full max-w-sm gap-4" onSubmit={event => event.preventDefault()} onReset={() => setDate(new Date(2026, 8, 15))}>
    <label htmlFor={id} className="text-sm font-semibold">{text.label}</label>
    <DatePicker id={id} name="dueDate" label={text.label} value={date} onValueChange={setDate} locale={locales[locale]} placeholder={text.choose} clearLabel={text.clear} describedBy={`${id}-hint`} disabledDates={{ before: new Date(2026, 8, 10) }} startMonth={new Date(2026, 8)} endMonth={new Date(2027, 11)} />
    <p id={`${id}-hint`} className="text-sm leading-relaxed text-[var(--muted-foreground)]">{text.hint}</p>
    <Button type="reset" size="sm" className="w-fit">{text.reset}</Button>
    <DatePicker label={text.locked} value={new Date(2026, 8, 15)} onValueChange={() => {}} disabled locale={locales[locale]} clearLabel={text.clear} />
  </form>;
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성