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');    // 时间选择截止下个月}    }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！