how to get selected ranges type from datepicker antd

Question

enter image description here

I have displayed all the fields for the ranges

onCalendarChange={onCalendarChange}
        onChange={onChangeDate}
        onOpenChange={handleOpenChange}
        open={forceOpen}
        placeholder={PLACEHOLDER}
        ranges={ranges}
        ref={pickerRef}
        separator="-"
        size="small"
        value={value}

**My Question is: how to get the selected range from antd date picker.

I have tried onOK and onPanelChnages but I didn't find a way to get selected ranges typed as strings.

Answer 1

https://ant.design/components/date-picker#rangepicker

according to official docs, you can use onChange

onChange={(dates, dateString)=> console.log(dates, dateString)}

Answer 2

Use this hope it will solve your issue

const onCalendarChange = (dates, dateStrings) => {
   console.log(dates);  // this will contain the selected range (start date 
   and end date)
   console.log(dateStrings);  // this will contain the selected range as 
   strings (e.g. "2022-12-20 - 2022-12-30")
};

<DatePicker
 onCalendarChange={onCalendarChange}
  ranges={ranges}
   ...
 />