前言
小徒弟的一个问题,写了一个简单的demo,因为是月份的选择,所以我们直接使用MonthPicker
组件进行改造即可;
内容
CodeSandbox
完整代码
<template> <div> <a-month-picker placeholder="开始日期" v-model="startValue" :disabled-date="disabledStartDate" @openChange="handleStartOpenChange" /> ~ <a-month-picker placeholder="结束日期" v-model="endValue" :open="endOpen" @openChange="handleEndOpenChange" :disabled-date="disabledEndDate" /> </div> </template> <script> import moment from "moment"; export default { data() { return { startValue: null, endValue: null, endOpen: false, }; }, watch: { startValue(val) { console.log("startValue", val); }, endValue(val) { console.log("endValue", val); }, }, methods: { moment, disabledStartDate(startValue) { const endValue = this.endValue; // 未来时间不可选择 if (startValue.year() > moment().year()) { return startValue.month() > -1; } // 选择当年且endValue有值 if (startValue.year() === moment().year() && endValue) { return ( startValue.valueOf() > endValue.valueOf() || startValue.month() >= 10 ); } // 选择当年endValue无值 if (startValue.year() === moment().year() && !endValue) { return startValue.month() >= 10; } if (!startValue || !endValue) { return false; } return startValue.valueOf() > endValue.valueOf(); }, disabledEndDate(endValue) { const startValue = this.startValue; // 未来时间不可选择 if (endValue.year() > moment().year()) { return endValue.month() > -1; } // 选择当年startValue有值 if (endValue.year() === moment().year() && startValue) { return ( startValue.valueOf() >= endValue.valueOf() || endValue.month() >= 10 ); } // 选择当年startValue无值 if (endValue.year() === moment().year() && !startValue) { return endValue.month() >= 10; } if (!startValue || !endValue) { return false; } return startValue.valueOf() >= endValue.valueOf(); }, handleStartOpenChange(open) { if (!open) { this.endOpen = true; } }, handleEndOpenChange(open) { this.endOpen = open; }, }, }; </script>
效果
学无止境,谦卑而行.