民國日期範圍選擇器
民國紀年日期範圍選擇器，自動驗證起訖日期順序、計算總天數，由兩個 ROCDatePicker 組合而成。
ROC (民國) date range picker — composes two ROCDatePickers with cross-field validation so the end date cannot be before the start. Auto-calculates the day count.
CLI
npx taiwan-ui add roc-date-range-pickernpm package
npm install @taiwan-ui/reactRequires: components/taiwan/ROCDatePicker
| Prop | Type | Default |
|---|---|---|
value* | ROCDateRange | — |
onChange* | (range: ROCDateRange) => void | — |
minDate | Date | — |
maxDate | Date | — |
startPlaceholder | string | "起始日期" |
endPlaceholder | string | "結束日期" |
disabled | boolean | false |
showGregorianSub | boolean | true |
separator | React.ReactNode | "→" |
起始日佔位
結束日佔位
停用全部
顯示西元副標
Non-editable type — edit in code.
中間分隔符
import ROCDateRangePicker from "@/components/taiwan/ROCDateRangePicker";
export default function Example() {
return (
<ROCDateRangePicker
startPlaceholder="起始日期"
endPlaceholder="結束日期"
showGregorianSub={true}
separator="→"
/>
);
}
import { useState } from "react";
import ROCDateRangePicker, { type ROCDateRange } from "@/components/taiwan/ROCDateRangePicker";
export default function LeaveForm() {
const [range, setRange] = useState<ROCDateRange>({ start: null, end: null });
return <ROCDateRangePicker value={range} onChange={setRange} />;
}