民國日期選擇器
民國/西元雙曆顯示，支援日期範圍限制、今天/清除快捷鍵。
Date picker with ROC (Minguo) calendar support. Displays both ROC and Gregorian years with min/max date constraints.
CLI
npx taiwan-ui add roc-date-pickernpm package
npm install @taiwan-ui/react| Prop | Type | Default |
|---|---|---|
value* | ROCDate | null | — |
onChange* | (date: ROCDate | null) => void | — |
placeholder | string | "請選擇日期" |
minDate | Date | — |
maxDate | Date | — |
disabled | boolean | false |
showGregorianSub | boolean | true |
佔位文字
停用選擇器
顯示西元日期副標
import ROCDatePicker from "@/components/taiwan/ROCDatePicker";
export default function Example() {
return (
<ROCDatePicker
placeholder="請選擇日期"
showGregorianSub={true}
/>
);
}
import { useState } from "react";
import ROCDatePicker, { type ROCDate } from "@/components/taiwan/ROCDatePicker";
export default function MyForm() {
const [date, setDate] = useState<ROCDate | null>(null);
return <ROCDatePicker value={date} onChange={setDate} />;
}