vue Ant Design a-range-picker自定义时间
要实现的效果 ，选择时间时，需要添加 昨天，今天，上周，本月，本季度等筛选条件
步骤
自定义 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 }
在页面中引入使用
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'); // 时间选择截止下个月} }
