DatePicker와 RangePicker의 value 핸들링
DatePicker
value
와 onChange
옵션을 활용하여 <DatePicker />
의 값을 핸들링할 수 있습니다.
value
- component :
<DatePicker />
- required :
false
- type :
Date
| null
- default :
null
onChange
- component :
<DatePicker />
- required :
false
- type :
(newValue: Date | null) => void;
- default :
undefined
예시
export default function Container() {
const [value, setValue] = useState<Date | null>(new Date());
return <DatePicker value={value} onChange={setValue} />
}
RangePicker
DatePicker
와 동일한 매커니즘을 사용하지만 startValue
, endValue
두개의 옵션을 사용합니다.
startValue, endValue
- component :
<RangePicker />
- required :
false
- type :
Date
| null
- default :
null
onChangeStart, onChangeEnd
- component :
<RangePicker />
- required :
false
- type :
(newValue: Date | null) => void;
- default :
undefined
예시
export default function Container() {
const [startValue, setStartValue] = useState<Date | null>(new Date());
const [endValue, setEndValue] = useState<Date | null>(new Date());
return (
<RangePicker
startValue={startValue}
endValue={endValue}
onChangeStart={setStartValue}
onChangeEnd={setEndValue}
/>
)
}