zoukankan      html  css  js  c++  java
  • elementui 日历组件

    限制elementui picker组件 限制选择日期在一个月内。

    <el-date-picker
          v-model="dateValue"
          class="filter-item"
          type="daterange"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @blur="dateBlurHandle"
          :picker-options="pickerOptions"
        >
     </el-date-picker>
    
    //bind 值
          dateValue: "",
          pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              this.choiceDateMinTime = minDate.getTime();
              this.choiceDateMaxTime = maxDate;
              this.choiceDateMin = minDate;
              console.log(maxDate, minDate)
              if (maxDate) {
                this.choiceDateMinTime = "";
              }
            },
            disabledDate: time => {
              if (!isNull(this.choiceDateMinTime)) {
                const _year = this.choiceDateMin.getFullYear();
                const _month = this.choiceDateMin.getMonth() + 1;
                const maxTime = new Date(_year, _month, 0).getTime();
                const nowDate = Date.now();
                let temp = Math.min(maxTime, nowDate);
                return time.getTime() < this.choiceDateMinTime ||     time.getTime() > temp;
              }
              return time.getTime() > Date.now();
            }
          },
          choiceDateMinTime: "",
          choiceDateMaxTime: "",
          choiceDateMin: "",   
    
    //方法
    
        dateBlurHandle() {
          if(!this.choiceDateMaxTime) {
            this.choiceDateMinTime = ''
          }
        },  
  • 相关阅读:
    CMU Database Systems
    Calcite分析
    CMU Database Systems
    CMU Advanced DB System
    笔记
    MyBatis Generator中文文档
    Run Test Case on Spark
    Flex报错Error #2048: 安全沙箱冲突
    看看这个超级有用的一种类型——匿名类型
    Java实战_手把手编写记事本
  • 原文地址:https://www.cnblogs.com/tutao1995/p/13372897.html
Copyright © 2011-2022 走看看