ReactJs DateRangePicker 列表中最后选中的筛选项高亮异常问题

问题原因 #

DateRangePicker的预设范围高亮逻辑是比对当前传入的startDate、endDate和ranges配置里对应预设的时间区间是否完全匹配，该高亮异常是时间精度不匹配导致的：你开启了timePickerSeconds展示秒级时间，但预设范围的时间精度、或者state里存储的起止时间精度没有对齐到秒，组件判定当前选中区间和预设不匹配，就不会高亮对应的预设选项。

修复步骤 #

• 第一步：统一DATEPICKER_RANGES里所有预设的时间精度到秒，示例配置如下：

const DATEPICKER_RANGES = {
  'Last 15 Minutes': [
    moment().subtract(15, 'minutes').startOf('second'),
    moment().endOf('second')
  ],
  // 其余所有预设项都按上述格式统一对齐到秒精度
}

• 第二步：给DateRangePicker组件补充linkedCalendars={false}属性，避免双日历联动导致的时间偏移，修改后的组件代码如下：

<DateRangePicker
     onApply={this.handleDatePicker}
     showDropdowns
     showCustomRangeLabel
     showWeekNumbers
     startDate={moment(this.state.datetimeFrom).startOf('second')}
     endDate={moment(this.state.datetimeTo).endOf('second')}
     timePicker
     timePicker24Hour
     timePickerSeconds
     ranges={DATEPICKER_RANGES }
     locale={DATEPICKER_LOCALE}
     linkedCalendars={false}
/>

• 第三步：确认handleDatePicker回调中存储到state的datetimeFrom、datetimeTo也统一保留秒级精度，不要做截断处理。

完成以上调整后选中预设项即可正常高亮。

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