React中semantic-ui-calendar-react日期范围选择器如何拆分起止日期

我之前也碰到过这个组件的小麻烦！确实官方文档里没明确提简便的拆分方式，但其实不用写复杂正则，几步就能搞定：

1. 先修正你的split用法 #

你之前尝试this.state.datesRange.split(" ",3)无效，是因为this.state.datesRange是一个对象（{datesRange: "20190504 - 20190522"}），不是字符串。你需要先提取里面的字符串值再拆分：

// 假设你的state里存的是完整的datesRange对象
const rangeStr = this.state.datesRange.datesRange;
const [startDateStr, endDateStr] = rangeStr.split(" - ");
// 现在startDateStr是"20190504"，endDateStr是"20190522"

2. 直接在onChange中拆分并存入state #

更高效的方式是在handleDateChange里直接处理，不用把整个对象存在state里：

handleDateChange = (e, { datesRange }) => {
  if (!datesRange) {
    this.setState({ startDate: null, endDate: null });
    return;
  }
  // 拆分日期范围字符串
  const [startStr, endStr] = datesRange.split(" - ");
  // 如果你需要Date对象，配合moment.js（这个库依赖moment）转换
  const startDate = moment(startStr, 'YYYYMMDD').toDate();
  const endDate = moment(endStr, 'YYYYMMDD').toDate();
  
  this.setState({ startDate, endDate });
};

这样你的state里就直接有startDate和endDate，后续使用更方便。

3. 关于替代方案 #

你用两个单独的DateInput作为临时方案没问题，但如果想保留范围选择的交互体验，上面的拆分方法足够简洁，完全不需要复杂逻辑。

遗憾的是这个组件确实没有提供直接返回拆分后日期的配置项，不过利用固定的分隔符拆分已经足够可靠啦。

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