Ant Design Vue日期組件的時間限制方式

更新時間：2023年04月20日 09:30:30 作者：開發(fā)那點事兒~

這篇文章主要介紹了Ant Design Vue日期組件的時間限制方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Ant Design Vue日期組件的時間限制

我介紹的日期組件是封裝成單獨的一個日期組件

是由用下面這個日期組件拼接組成.

而不是一個完整的開始時間和結(jié)束時間組件

以下：

開始時間不能選擇當(dāng)天日期;
結(jié)束時間不能小于開始時間;

上代碼：

disabled-date 是禁用屬性

j-date就是封裝的日期子組件 :

父組件：

?
<a-form-model-item label="活動開始時間">
   <j-date
     placeholder="請選擇開始日期"
     class="query-group-cust"
     :disabled-date="disabledStartDate"
     v-model="queryParam.startDate"
     @change="qingkong"
   ></j-date>
   <span class="query-group-split-cust"></span>
   <j-date
     placeholder="請選擇結(jié)束日期"
     class="query-group-cust"
     :disabled-date="disabledEndDate"
     v-model="queryParam.endDate"
     @change="qingkong"
    ></j-date>
</a-form-model-item>
 
?

這是開始和結(jié)束方法：

?
// 處理選擇時間
    // 開始
    disabledStartDate(val) {
      // console.log(val,this.queryParam.endDate,'開始');
      if (this.queryParam.endDate) {
        // return val && val > moment().endOf('day')
        return (
          val > moment(this.queryParam.endDate, 'YYYY-MM-DD').subtract(1, 'days').startOf('day') &&
          val > moment().subtract(1, 'days').startOf('day')
        )
      } else {
        return val >= moment().startOf('day')
        // return true;
      }
    },
    // 結(jié)束
    disabledEndDate(val) {
      // console.log(val,this.queryParam.startDate,'結(jié)束');
      if (this.queryParam.startDate) {
        console.log(val.format('YYYY-MM-DD'), this.queryParam.startDate, moment().startOf('day').format('YYYY-MM-DD'))
        return val < moment(this.queryParam.startDate, 'YYYY-MM-DD').endOf('day') || val > moment().endOf('day')
      } else {
        return val >= moment().endOf('day')
      }
    },
 
?

子組件：

你的子組件里面要把一下寫進去

:disabled-date="disabledDate" 
 
// 在pros里面把父組件里面的disabled-date接收
props: {
      disabledDate:{
        type: Function,
        required: false
      },
}

<template>
  <a-date-picker
    dropdownClassName="j-date-picker"
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    :disabled-date="disabledDate"
  />
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'JDate',
    props: {
      disabledDate:{
        type: Function,
        required: false
      },
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      dateFormat:{
        type: String,
        default: 'YYYY-MM-DD',
        required: false
      },
      //此屬性可以被廢棄了
      triggerChange:{
        type: Boolean,
        required: false,
        default: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      showTime:{
        type: Object|Boolean,
        required: false,
        default: false
      },
      getCalendarContainer: {
        type: Function,
        default: (node) => node.parentNode
      },
    },
    data () {
      let dateStr = this.value;
      return {
        decorator:"",
        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,this.dateFormat)
        }
      }
    },
    methods: {
      moment,
      handleDateChange(mom,dateStr){
        this.$emit('change', dateStr);
      },
     
    },
    //2.2新增 在組件內(nèi)定義 指定父組件調(diào)用時候的傳值屬性和事件類型 這個牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

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 = '';
        },
        //選擇開始時間/結(jié)束時間
        calendarPriceRangeChange (date) {
            this.selectPriceDate = date[0];
        },
        //根據(jù)選擇的開始時間/結(jié)束時間，動態(tài)渲染要禁用的日期
        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;
            //日期禁用規(guī)則
            this.timer = setTimeout(() => {
                this.dateYearDisabledRule();
            }, 0);
        },
        //選擇年度-面板關(guān)閉回調(diào)
        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');
            // 當(dāng)前面板的第一個和最后一個年份類似年份翻頁按鈕因此和年份翻頁按鈕做相同處理，否則會有錯誤
            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>