Ant Design Vue 时间选择器 自定义时间

vue Ant Design a-range-picker自定义时间

要实现的效果 ，选择时间时，需要添加 昨天，今天，上周，本月，本季度等筛选条件

步骤

1. 自定义 rangeDate.js

import moment from 'moment'
const rangeDate = {
    data() {
        return {
            ranges: {
                '昨天': [moment().day(moment().day() - 1), moment().day(moment().day() - 1)],
                '今天': [moment(), moment()],
                '上周': [moment().week(moment().week() - 1).startOf('week'), moment().week(moment().week() - 1).endOf('week')],
                '本周': [moment().weekday(0), moment().weekday(6)],
                '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
                '本月': [moment().startOf('month'), moment().endOf('month')],
                '上季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')],
                '本季度': [moment().startOf('quarter'), moment().endOf('quarter')],
                '去年': [moment().year(moment().year() - 1).startOf('year'), moment().year(moment().year() - 1).endOf('year')],
            }
        }
    },
    methods: { moment }
}
export { rangeDate }

2. 在页面中引入使用

import {rangeDate} from "@/utils/rangeData"

<a-range-picker v-model="queryParam.date" :ranges="ranges"  show-time format="YYYY-MM-DD" @change="onChange"/>

export default{
    mixins:[JeecgListMixin, mixinDevice,rangeDate],
    
}

自定义限制结束时间

   <a-range-picker v-model="queryParam.date" :disabled-date="disabledDate"  format="YYYY-MM-DD" @change="onChange"/>
   
   method:{
       
      disabledDate(current){
          // 时间选择超过当天日期不能选
           return current && current > moment().endOf('day');  
           //时间选择当前日期之前不能选
            return current && current < moment().endOf('day');    
            // 时间选择截止下个月
                       
      }    
   }