Ant Design Vue日期组件的时间限制方式

更新时间：2023年04月20日 09:30:30 作者：开发那点事儿~

这篇文章主要介绍了Ant Design Vue日期组件的时间限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Ant Design Vue日期组件的时间限制

我介绍的日期组件是封装成单独的一个日期组件

是由用下面这个日期组件拼接组成.

而不是一个完整的开始时间和结束时间组件

以下：

开始时间不能选择当天日期;
结束时间不能小于开始时间;

上代码：

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="请选择结束日期"
     class="query-group-cust"
     :disabled-date="disabledEndDate"
     v-model="queryParam.endDate"
     @change="qingkong"
    ></j-date>
</a-form-model-item>

这是开始和结束方法：


// 处理选择时间
    // 开始
    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;
      }
    },
    // 结束
    disabledEndDate(val) {
      // console.log(val,this.queryParam.startDate,'结束');
      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新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    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 = '';
        },
        //选择开始时间/结束时间
        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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue组件库发布到npm详解
本片文章给大家详细介绍了如何将Vue组件库发布到npm的方法以及代码示例分享，感兴趣的朋友参考学习下。
2018-02-02
Vue全局变量的定义及使用方法
这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
Vue3中vue-router的使用方法详解
Vue Router 是 Vue 的官方路由，它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举，本文将通过简单的示例为大家介绍一下vue-router的使用，需要的可以参考一下
2023-06-06
vue使用jsencrypt实现rsa前端加密的操作代码
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
这篇文章主要介绍了vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Vue中的nextTick作用和几个简单的使用场景
这篇文章主要介绍了Vue中的nextTick作用和几个简单的使用场景，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
Vue中实现表单地区选择与级联联动示例详解
这篇文章主要为大家介绍了Vue中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
Vue.js实现大转盘抽奖总结及实现思路
这篇文章主要介绍了 Vue.js实现大转盘抽奖总结及实现思路，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
vue学习之Vue-Router用法实例分析
这篇文章主要介绍了vue学习之Vue-Router用法,结合实例形式分析了Vue-Router路由原理与常见操作技巧,需要的朋友可以参考下
2020-01-01
$解决vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本问题$
解决vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps
这篇文章主要介绍了解决vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03