如何在React中使用Moment.js正确显示时间？

我来帮你搞定这个问题！你遇到的核心问题是Moment.js初始化时间时会默认填充当前日期，而React Datepicker虽然用showTimeSelectOnly只展示时间，但底层依然依赖完整的moment对象（包含日期部分），所以后续处理时会出现意外的日期值。另外日期输出07/020/2018应该是格式化时的小失误，我也一起帮你修正。

问题分析 #

1. 时间的异常日期问题：当你用moment('1122', 'HHmm')初始化时，Moment会自动把日期部分设为今天的日期，而不是一个“纯时间”对象。这就导致你拿到的starttime其实是[今天日期] 11:22，虽然Datepicker只显示时间，但对象本身带了当前日期，后续处理时就会出现随机日期的问题。
2. 日期显示错误：07/020/2018明显是格式化字符串写错了——应该是MM/DD/YYYY（月/日/年），而你可能误写成了MM/DDD/YYYY（DDD是一年中的第N天），所以把7月2日解析成了第20天。

解决方案 #

1. 正确初始化时间（绑定到固定日期）

最好的方式是把时间和你已有的startdate绑定在一起，这样starttime的日期部分和startdate一致，不会出现随机值。有两种写法：

写法一：直接组合日期时间字符串初始化

constructor(props) {
  super(props);
  this.state = {
    startdate: moment('20180702', 'YYYYMMDD'),
    starttime: moment('201807021122', 'YYYYMMDDHHmm'), // 把日期和时间拼接成完整格式
  };
}

写法二：单独设置时间后绑定日期

如果日期是动态的（比如来自props），可以用set方法给时间对象设置对应的日期：

constructor(props) {
  super(props);
  const targetDate = moment('20180702', 'YYYYMMDD');
  this.state = {
    startdate: targetDate,
    starttime: moment('1122', 'HHmm').set({
      year: targetDate.year(),
      month: targetDate.month(), // Moment的月份是0-based，7月对应6
      date: targetDate.date()
    }),
  };
}

2. 确保日期格式化正确

当你输出日期时，使用正确的格式符：

// 正确格式化日期为 07/02/2018
this.state.startdate.format('MM/DD/YYYY')

3. 仅提取时间部分（如果只需要时间字符串）

如果你后续只需要时间字符串，不管日期部分，可以在使用时直接格式化：

// 只获取 11:22
this.state.starttime.format('HH:mm')

这样处理后，React Datepicker能正确显示时间，你后续处理时也不会遇到异常的日期值啦！

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