element-UI月份选择器（禁用未来月份+限制选择12个月范围）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-UI月份选择器（禁用未来月份+限制选择12个月范围）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-UI月份选择器（禁用未来月份+限制选择12个月范围）

element-UI月份选择器（禁用未来月份+限制选择12个月范围）文章来源地址https://www.toymoban.com/news/detail-507013.html

                        <div class="selectItem" v-show="monthShow">
                            <el-date-picker
                            v-model="trendData.date"
                            :clearable="false"
                            type="monthrange"
                            :default-value="trendData.date"
                            :picker-options="monthpickoption"
                            value-format="yyyy-MM"
                            range-separator="至"
                            @change="onChangeDate"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>

        return {
              trendData: {
                date: []
            },
          minDate: null,
          maxDate: null
        },

      monthpickoption:{
            disabledDate: (time) => {
              if (this.minDate !== null && this.maxDate === null) {
                  let minMonth = this.minDate.getMonth(),
                  lastYear = new Date(this.minDate).setMonth(minMonth - 11),
                  nextYear = new Date(this.minDate).setMonth(minMonth + 11);
                let minTime = this.minDate.getTime()
                let nextTime = new Date().setMonth(new Date().getMonth() + 11)
                let lastTime = new Date().setMonth(new Date().getMonth() - 11)
               if (minTime <= nextTime || minTime >= lastTime){
                  //开始日期少于当前月+12个月 并且大于当前月-12个月，则表示只限制前面的范围
                  return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
                }
                else {
                  // 只能选 minDate 前后一年的范围
                  return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
                }
              }else {
                let startMonth = this.trendData.date[0]
                let month = new Date(startMonth).getMonth()
                let lastMonth = new Date(startMonth).setMonth(month - 11)
                //如果有默认值，只禁用开始日期，因为已经限定了禁用未来范围，且默认值已经为12个月范围
                return this.monthPick(time) || time < lastMonth.valueOf();
              }
            },
            onPick: ({minDate, maxDate}) => {
              this.minDate = minDate;
              this.maxDate = maxDate;
            }
            }

monthPick(time){
            // 获取当前的月份信息
            const date = new Date() // 获取当前的时间基本信息，值是这样的： Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
            const year = date.getFullYear() // 获取当前年份，值是这样的： 2021
            let month = date.getMonth() + 1 // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
            if (month >= 1 && month <= 9) {
              // 如果是1月到9月就要在前面补上一个0   比如：02、07    月份这样表示
              month = '0' + month
            }
            const nowDate = year.toString() + month.toString() // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107

            // 获取时间选择器的月份信息
            const timeyear = time.getFullYear() // 获取时间选择器的年份（有很多）
            let timemonth = time.getMonth() + 1 // 与上面同理
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = '0' + timemonth
            }
            const elTimeData = timeyear.toString() + timemonth.toString()

            // 返回，时间选择器的日期月份大于当前日期的月份，又因为disabledDate函数是控制月份禁用不可选
            // 所以，最终就是：时间选择器的月份大于当前的月份，就都禁用掉，所以就实现了最终效果：
            // 大于等于当前月份都不可选
            return elTimeData > nowDate // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
          }

到了这里，关于element-UI月份选择器（禁用未来月份+限制选择12个月范围）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！