Title

vue+elementUI 时间控件范围设置

选择时间是当前时间之前或者之后(包括当前时间)

        <el-date-picker
          v-model="dataForm.date"
          value-format="yyyy-MM-dd"
          type="date"
          :picker-options="pickerOptions"
          placeholder="选择时间">
        </el-date-picker>

选择今天以及今天之后的日期

data (){ 
   return {
     pickerOptions: { 
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
         }
     },
  }
}

选择今天以及今天以前的日期 同理 相反

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
          }
        },  
   }     
}

选择当前时间

        <el-date-picker
          v-model="dataForm.date"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择时间">
        </el-date-picker>

选择的时间是当前的时间

data(){
    return {
        dataForm:{
            date: "",
        }
    }
},
created(){
    this.getNowTime()
},
methods:{
    getNowTime() {
       let now = new Date();
       let year = now.getFullYear(); //得到年份
       let month = now.getMonth(); //得到月份
       let date = now.getDate(); //得到日期
       let hour = now.getHours(); //获取系统时,
       let minute = now.getMinutes(); //分
       let second = now.getSeconds(); //秒
       month = month + 1;
       month = month.toString().padStart(2, "0");
       date = date.toString().padStart(2, "0");
       let defaultDate = `${year}-${month}-${date}`;
       this.$set(this.dataForm, "date", defaultDate);
   },
}

参考链接:
https://www.cnblogs.com/shiyiersan/p/15440662.html
https://www.cnblogs.com/webCandy/p/15119427.html

posted @ 2022-01-21 16:30  快乐小洋人  阅读(276)  评论(0编辑  收藏  举报