Symbol

DatePicker와 RangePicker의 value 핸들링

DatePicker

valueonChange 옵션을 활용하여 <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} /> ) }