您现在的位置:首页 >> 前端 >> 内容

elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现

时间:2018/6/29 16:43:59 点击:

  核心提示:elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现p class=block size=smallel-date-pickerv-model=value7type=dat...

elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现

<p class="block" size="small">
                    <el-date-picker
                        v-model="value7"
                        type="daterange"
                        align="left"
                        format="yyyy/MM/dd"
                        size="small"
                        unlink-panels                        
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">                        
                    </el-date-picker>
                </p>
首先你得把这段代码复制到你的html中

然后再导入这段代码
  pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();   这里就是设置当天后的日期不能被点击
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近二个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value6: "",
      //   value7:""
      value7: []
    };

然后再methods中写一个以下的方法  在created中调用该方法  

  startTime() {
      let now = new Date();
      let startDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate() - 7)
      )
        .toISOString()
        .slice(0, 10);

      let endDate = new Date(
        Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
      )
        .toISOString()
        .slice(0, 10);

      this.value7 = [];
      this.value7.push(startDate);
      this.value7.push(endDate);
    },

这样就完成了,这样的效果,网页一打开默认显示当天日期的前七天,如果想要设置更久,在方法中也可以改,相信你可以找到在哪里改的

elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现

Tags:EL LE EM ME 
作者:网络 来源:qq_4188920