antd Vue项目 日期组件限制年月周日

1.限制年份

2.限制月份

 

 

3.限制周

 

4.限制日

 

5.具体代码如下： 

 

<template>
    <div>
        <a-form-model ref="form"
            :model="searchModel"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 14 }">
            <a-row :gutter="[20, 30]"
                class="form-seach">
                <a-col :sm="{ span: 24 }"
                    :md="{ span: 12 }"
                    :lg="{ span: 12 }"
                    :xl="{ span: 8 }"
                    :xxl="{ span: 6 }">
                    <div class="line">
                        <span class="label">周期维度:</span>
                        <a-select v-model="searchModel.selectValue"
                            placeholder="请选择周期维度">
                            <a-select-option value="年">年</a-select-option>
                            <a-select-option value="月">月</a-select-option>
                            <a-select-option value="周">周</a-select-option>
                            <a-select-option value="日">日</a-select-option>
                        </a-select>
                    </div>
                </a-col>
                <a-col :sm="{ span: 24 }"
                    :md="{ span: 12 }"
                    :lg="{ span: 12 }"
                    :xl="{ span: 8 }"
                    :xxl="{ span: 6 }">
                    <div class="line">
                        <span class="label">周期选择:</span>
                        <template v-if="searchModel.selectValue=='年'||!searchModel.selectValue">
                            <a-date-picker v-model="searchModel.year"
                                mode="year"
                                format="YYYY"
                                :open="yearShow"
                                :disabled="!searchModel.selectValue"
                                @openChange="openChange"
                                @panelChange="panelChange" />
                        </template>
                        <template v-if="searchModel.selectValue=='月'">
                            <a-month-picker v-model="searchModel.month"
                                :disabled-date="disabledMonth"
                                :defaultPickerValue="moment().format('YYYY-MM')"
                                :disabled="!searchModel.selectValue" />
                        </template>
                        <template v-if="searchModel.selectValue=='周'">
                            <a-range-picker :disabled-date="disabledDate"
                                v-model="searchModel.week"
                                @focus="focus"
                                @calendarChange="calendarPriceRangeChange"
                                @change="changePriceRangeDate" />
                        </template>
                        <div v-show="searchModel.selectValue=='日'"
                            style="width:272px">
                            <a-date-picker v-model="searchModel.date"
                                :disabled="!searchModel.selectValue"
                                :disabled-date="disableData"
                                :defaultPickerValue="moment().format('YYYY-MM-DD')"
                                :showToday="false" />
                        </div>
                    </div>
                </a-col>
            </a-row>
        </a-form-model>
    </div>
</template>
<script>
import moment from "moment";
export default {
    data () {
        return {
            yearShow: false, //选择年度是否显示选择面板
            timer: null,
            searchModel: {
                selectValue: undefined,
                year: '',
                month: '',
                week: [],
                date: ''
            },
            selectPriceDate: '',
            loading: false,
        };
    },
    props: {
        limitYear: {
            type: Array,
            default(){
                return [2,1]
            }
        },
        limitMonth: {
            type: Array,
            default(){
                return [-1, -12*2-3]
            }
        },
        limitWeek: {
            type: Array,
            default(){
                return ['2020-11-01']
            }
        },
        limitData: {
            type: Array,
            default(){
                return ['2020-11-01']
            }
        },
    },
    methods: {
        moment,
        //选择完时间 清空限制
        changePriceRangeDate () {
            this.selectPriceDate = '';
        },
        //选择开始时间/结束时间
        calendarPriceRangeChange (date) {
            this.selectPriceDate = date[0];
        },
        //根据选择的开始时间/结束时间，动态渲染要禁用的日期
        disabledDate (current) {
            if (this.selectPriceDate) {
                const diffDate = current.diff(this.selectPriceDate, 'days');
                if (moment(this.selectPriceDate).format('YYYY-MM-DD') < moment().add(-8, 'days').format('YYYY-MM-DD')) {
                    return Math.abs(diffDate) != 6;
                } else {
                    return diffDate != -6;
                }
            } else {
                return current && current > moment().add(-1, 'days') || current && current < moment(this.limitWeek[0]);
            }
        },
        disabledMonth (current) {
            return current && current > moment().add(this.limitMonth[0], 'M') || current && current < moment().add(this.limitMonth[1], 'M');
        },
        disableData (current) {
            return current && current > moment().add(-1, 'days') || current && current < moment(this.limitData[0]);
        },
        focus () {
            this.selectPriceDate = '';
        },
        openChange (status) {
            this.yearShow = status;
            //日期禁用规则
            this.timer = setTimeout(() => {
                this.dateYearDisabledRule();
            }, 0);
        },
        //选择年度-面板关闭回调
        panelChange (value) {
            this.yearShow = false;
            this.searchModel.year = value;
            //清除定时器
            clearTimeout(this.timer);
        },
        dateYearDisabledRule () {
            //获取dom元素
            const tableDom = document.querySelectorAll('.ant-calendar-year-panel-body');
            const prevBtn = document.querySelector('.ant-calendar-year-panel-prev-decade-btn');
            const nextBtn = document.querySelector('.ant-calendar-year-panel-next-decade-btn');
            const tdDom = tableDom[0].querySelectorAll('td');
            // 当前面板的第一个和最后一个年份类似年份翻页按钮因此和年份翻页按钮做相同处理，否则会有错误
            const prevBtnTd = tdDom[0];
            const nextBtnTd = tdDom[tdDom.length - 1];
            //定义所需对比值
            const nowDate = moment().format('YYYY');
            if (tableDom.length > 0) {
                tdDom.forEach(item => {
                    if (item.innerText < nowDate - this.limitYear[0] || item.innerText > nowDate - this.limitYear[1]) {
                        item.setAttribute('class', 'ant-calendar-year-panel-cell-disabled');
                    } else {
                        item.classList.remove('ant-calendar-year-panel-cell-disabled');
                    }
                });
                // 年份翻页后同理以上方法
                const ev = this.dateYearDisabledRule.bind(this, 'lteNow');
                prevBtn.removeEventListener('click', ev);
                nextBtn.removeEventListener('click', ev);
                prevBtn.addEventListener('click', ev);
                nextBtn.addEventListener('click', ev);
                prevBtnTd.removeEventListener('click', ev);
                nextBtnTd.removeEventListener('click', ev);
                prevBtnTd.addEventListener('click', ev);
                nextBtnTd.addEventListener('click', ev);
            }
        }
    }
};

</script>
<style lang="stylus">
.panel-table {
    margin-top: 30px;
}

.ant-calendar-year-panel-cell-disabled {
    pointer-events: none;

    .ant-calendar-year-panel-year {
        color: rgba(0, 0, 0, 0.25);
        background: #f5f5f5;
    }
}
</style>