antd 日期选择框增加季度预设范围

327 阅读1分钟

antd 日期选择框增加季度预设范围

antd 的rangepicker是支持预设的

日期选择框 DatePicker - Ant Design

实现方法很简单,按照官网示例用moment初始化一下即可

获取当前一季度的开始日期时间: moment().quarter(1).startOf('quarter')

const seasons = {};
Array(4).fill(1).map((_,index)=>{
  const i = index+1;
  seasons[`Q${i}`] = [moment().quarter(i).startOf('quarter'), moment().quarter(i).endOf('quarter')]
})

组件使用:

<RangePicker
      ranges={seasons} />

效果: