使用moment后Ant Design RangePicker无法获取值，点击仍返回null

问题根源 #

1. 语法错误：你代码里第一个console.log缺少闭合的右括号，这会直接导致代码执行报错，无法正常获取值。
2. 重复包装moment对象：Ant Design（v3/v4版本）的RangePicker组件onChange回调返回的values本身就是moment实例数组，不需要再用moment()去包裹，重复包装反而会导致解析错误返回null。

修正后的代码 #

import { DatePicker } from 'antd';
import moment from 'moment'; // 别忘了导入moment库

const { RangePicker } = DatePicker;

function selectTimeSlots(values) {
  // 先判断值是否存在，避免空值报错
  if (values && values.length === 2) {
    // 直接使用返回的moment实例调用format方法
    console.log(values[0].format('MMM DD YYYY HH:mm'));
    console.log(values[1].format('MMM DD YYYY HH:mm'));
  }
}

<RangePicker 
  showTime={{ format: 'HH:mm' }} 
  format='MMM DD YYYY HH:mm' 
  onChange={selectTimeSlots}
/>

额外注意（针对AntD v5） #

如果是使用Ant Design v5版本，RangePicker默认返回的是Day.js对象，这时候用moment处理会返回null。解决办法二选一：

• 改用Day.js进行格式化：直接调用values[0].format('MMM DD YYYY HH:mm')（用法和moment几乎一致）
• 配置组件使用moment：安装@ant-design/moment-webpack-plugin并配置webpack，让组件继续以moment作为日期处理依赖。

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