页面执行效果如下:

//年|月|日可分别选择并默认显示当前年月日

//只能选择当前年之前的年月日

<el-date-picker
              v-model="value1"
              type="year"
              format="yyyy年"
              :picker-options="pickerOptions0"
              placeholder="选择年"
              class="year"
            >
            </el-date-picker>
            <el-date-picker
              v-model="value2"
              type="month"
              format="MM月"
              :picker-options="pickerOptions0"
              placeholder="月"
              class="mon"
            >
            </el-date-picker>
            <el-date-picker
              v-model="value3"
              type="date"
              format="dd日"
              :picker-options="pickerOptions0"
              placeholder="日"
              class="day"
            >

在data方法中引入

export default {
  data() {
    return {
      pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;//如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
          }
        }, 
      value1: "",
      value2: "",
      value3: "",
 };
},

在methods中赋值

getdatetime() {
      this.value1 = new Date();
      this.value2 = new Date();
      this.value3 = new Date();
    },

最后在mounted周期内添加

mounted(){
 let that = this;
    that.getdatetime();
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐