【Element】日期选择器 el-date-picker

宾果的救星

已于 2022-12-06 16:37:20 修改

阅读量6.3k

点赞数 1

分类专栏： # Element

于 2022-07-12 18:28:35 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/125748970

版权

vue.js elementui

Element 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

ElementUI

日期选择—时间不能选择

今天之后的时间不能选择

<el-form-item label="上传日期">
    <el-date-picker
        v-model="form.up_time"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :picker-options="time_option"
    >
    </el-date-picker>
</el-form-item>

data() {
    return {
        time_option: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        }       
    },
}

今天以及今天之前的时间不能选择

data() {
    return {
        time_option: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        }       
    },
}

今天之前的时间不能选择

data() {
    return {
        time_option: {
            disabledDate(time) {
                return time.getTime() < Date.now() -8.64e7;
            },
        }       
    },
}

参考：datePicker 设置当前日期之前的日期不可选

日期范围

<el-date-picker
  v-model="checkTime"
  type="daterange"
  align="right"
  unlink-panels
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd"
  format="yyyy-MM-dd"
  :picker-options="pickerOptions"
  @change="checkChange"
>
</el-date-picker>

checkTime: [],
checkStartTime: "",
checkEndTime: "",

pickerOptions: {
  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 * 90);
        picker.$emit("pick", [start, end]);
      },
    },
  ],
},

checkChange(e) {
  this.checkStartTime = e ? e[0] : "";
  this.checkEndTime = e ? e[1] : "";
},

回填

let data = res.data
this.checkStartTime = data.start;
this.checkEndTime = data.end;
this.checkTime = data.start && data.end ? [data.start, data.end] : [];