element-ui日期组件,日期范围组件,限制时间选择是一个范围

element-ui日期组件,日期范围组件,限制时间选择是一个范围

例如限制

el-date-picker
                    @change="checkTimeChange"
                    style="width: 320px;"
                    v-model="formSearch.riqiTop"
                    type="daterange"
                    range-separator="-"
                    :start-placeholder="languageDate.start_date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :end-placeholder="languageDate.end_date"
                    :picker-options="expireTimeOption"
                >
                </el-date-picker>
expireTimeOption date里面

  

data() {
			return {
          
                expireTimeOption: {
                    disabledDate: this.disabledDate,
                },
              
			}
		},

  methods里面

/**
             * 开始日期不能选择当天之前
             * 结束日期不能选择60天后
             * 相当于只能选择今天开始60天内
             * **/
            disabledDate(time) {
                const today = new Date();
                today.setHours(0, 0, 0, 0); 
                const sixtyDaysLater = new Date(today);
                sixtyDaysLater.setDate(sixtyDaysLater.getDate() + 60);
                
                // 返回大于60天后的日期为禁用状态
                if(time.getTime() > sixtyDaysLater.getTime()) return true
                // 当天之前禁用
                if(time.getTime() < Date.now() - 8.64e7) return true
                return false
            },

 

posted @ 2025-01-23 10:42  haonanElva  阅读(193)  评论(0)    收藏  举报