基于moment.js实现Bootstrap Table带时分秒日期范围筛选

原有日期筛选逻辑存在两个核心缺陷，导致带时分秒的时间格式筛选失效：

• 逻辑默认将单元格内容与枚举生成的YYYY-MM-DD格式纯日期字符串做等值匹配，带HH:mm:ss后缀的时间字符串永远无法命中纯日期值
• 未做时间边界处理，直接字符串比较无法识别带时分秒的时间属于对应自然日的范围

不需要修改现有表格的DOM结构，仅调整筛选逻辑即可，全程基于moment.js做时间解析和比较，避免字符串匹配的兼容性问题：

• 废弃原逻辑中「枚举区间内所有日期字符串、做等值匹配」的实现，统一将时间值转为moment对象做范围判断
• 补全时间边界处理：选中的开始日期默认取当日00:00:00，结束日期默认取当日23:59:59，避免遗漏当日带时分秒的记录
• 明确指定时间解析格式，防止moment自动解析产生偏差

替换原有筛选判断逻辑为以下代码即可：

/**
 * 日期范围筛选判断函数
 * @param {string} cellVal 表格单元格内的时间值
 * @param {string} startVal 筛选框选中的开始日期 格式为YYYY-MM-DD
 * @param {string} endVal 筛选框选中的结束日期 格式为YYYY-MM-DD
 * @returns {boolean} 是否命中筛选范围
 */
function dateRangeCheck(cellVal, startVal, endVal) {
  // 解析单元格时间，同时兼容纯日期、带时分秒两种格式
  const cellTime = moment(cellVal, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss']);
  // 处理时间边界
  const rangeStart = moment(startVal).startOf('day');
  const rangeEnd = moment(endVal).endOf('day');
  // 闭区间判断，包含起止两天的所有时间点
  return cellTime.isBetween(rangeStart, rangeEnd, null, '[]');
}

// Bootstrap Table列配置中绑定自定义筛选逻辑示例
$('#table').bootstrapTable({
  columns: [{
    field: 'dateField',
    title: '时间',
    // 绑定自定义筛选规则
    filterCustom: (val, rowVal) => {
      // 从筛选输入框获取起止值，替换为实际业务中使用的输入框选择器即可
      const start = $('#dateStart').val();
      const end = $('#dateEnd').val();
      // 未选择筛选范围时默认展示全部数据
      if (!start || !end) return true;
      return dateRangeCheck(rowVal, start, end);
    }
  }]
})

• 以上逻辑同时兼容YYYY-MM-DD纯日期、YYYY-MM-DD HH:mm:ss带时分秒两种时间格式，存量纯日期数据无需改造
• 筛选精度支持到秒，不会出现跨日、漏选当日数据的问题
• 不需要修改现有表格渲染的HTML结构，原有表格代码可直接复用

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