如何正确使用Moment.js格式化Ant Design Calendar选中日期

问题场景 #

使用Ant Design的Calendar组件时，直接打印onChange回调返回的date能得到对应选中日期的Moment对象，但用moment(date).format("YYYY-MM-DD")格式化时，始终输出当前日期（比如示例中的2022-12-26）。

解决方案 #

直接调用date自带的format方法即可，因为Ant Design Calendar的onChange回调返回的date本身就是Moment实例，无需再用moment()重新包装：

<Calendar
  fullscreen={false}
  onChange={(date) => {
    console.log(date.format("YYYY-MM-DD"));
  }}
/>

原因说明 #

问题出在重复用moment()包裹了已经是Moment实例的date参数。当Moment接收一个已有的Moment对象作为入参时，部分场景下会创建指向当前时间的新实例，而非复用传入的日期对象，导致格式化结果始终为当前日期。

如果遇到组件返回原生Date对象的特殊情况（比如配置了特定的日期适配），可以先将date转为原生Date再传入Moment：

<Calendar
  fullscreen={false}
  onChange={(date) => {
    console.log(moment(date.toDate()).format("YYYY-MM-DD"));
  }}
/>

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