如何创建包含1H、2H复选框的上下半年筛选下拉选择器

已知基础条件 #

• 绑定日期字段名：Requests
• 字段存储格式：YYYYMMDD
• 预设选项对应日期区间：
  • 上半年（1H）：当年1月1日 ~ 当年6月30日，对应格式值为{年份}0101到{年份}0630
  • 下半年（2H）：当年7月1日 ~ 当年12月31日，对应格式值为{年份}0701到{年份}1231

具体实现逻辑 #

1. 替换原有标准日期下拉控件为支持复选的下拉组件，内置两个可选选项：上半年（1H）、下半年（2H）
2. 选中值处理规则：
   • 仅勾选1个选项时，直接输出该选项对应的Requests字段起止值
   • 同时勾选两个选项时，自动输出全年范围的Requests字段起止值，即{年份}0101到{年份}1231

参考代码（前端JS场景） #

// 预设区间映射
const getPeriodRange = (year = new Date().getFullYear()) => {
  const yearStr = year.toString()
  return {
    '1H': [yearStr + '0101', yearStr + '0630'],
    '2H': [yearStr + '0701', yearStr + '1231']
  }
}

// 下拉选中事件处理
const handleSelect = (selectedKeys) => {
  const rangeMap = getPeriodRange()
  const allRanges = selectedKeys.flatMap(key => rangeMap[key])
  // 生成最终Requests字段值，区间格式可根据后端要求调整
  const Requests = [Math.min(...allRanges), Math.max(...allRanges)]
  return Requests
}

拓展兼容 #

如果需要支持选择其他年份的上下半年，只需在下拉组件内新增年份选择器，将用户选中的年份传入getPeriodRange方法即可，原有筛选逻辑无需修改。

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