如何获取Ant Design日期选择器的选中范围（字符串类型）

问题背景 #

已配置RangePicker的如下属性，但无法获取字符串类型的选中范围：

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

解决方案 #

你可以通过以下两种方式直接获取格式化后的字符串类型日期范围：

1. 利用onChange回调（推荐）

onChange会在用户选择日期（包括点击预设范围）时触发，它的第二个参数就是自动格式化好的字符串数组：

// 以Ant Design v5默认的Dayjs为例
const onChangeDate = (dates, dateStrings) => {
  // dateStrings格式默认是 ['YYYY-MM-DD', 'YYYY-MM-DD']
  console.log('选中的范围字符串:', dateStrings);
  
  // 如需自定义格式，可手动处理日期对象
  const customFormatted = dates.map(date => date.format('YYYY/MM/DD'));
  console.log('自定义格式范围:', customFormatted);
};

2. 利用onOk回调（点击确定后触发）

如果希望仅在用户点击面板「确定」按钮时获取范围，使用onOk回调，同样会返回格式化后的字符串数组：

const handleOk = (dates, dateStrings) => {
  console.log('确认后的范围字符串:', dateStrings);
};

在RangePicker上添加该属性即可：

<RangePicker
  // 你的原有配置
  onOk={handleOk}
/>

常见问题排查 #

你之前尝试onOK和onPanelChanges无效，大概率是这两个原因：

• 属性拼写错误：正确属性名是小写的onOk，不是大写的onOK
• onPanelChange仅返回面板中临时选择的日期，并非最终确认的范围，不适合用来获取最终选中值

内容的提问来源于stack exchange，提问作者Abhi