【el-date-picker】时间选择控件

发光发热的二毛

已于 2024-04-15 18:20:03 修改

阅读量146

点赞数 1

分类专栏：前端学习文章标签： javascript 前端 css

于 2024-04-15 18:08:28 首次发布

本文链接：https://blog.csdn.net/qq_42702382/article/details/137790319

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中使用ElementUI的el-date-picker组件，包括设置默认时间范围、禁选某些时间以及自定义快捷方式选取常用时间段的功能。

摘要由CSDN通过智能技术生成

1、基础的控件选择
2、设置默认时间
3、设置不可选时间

<template>
  <div class="block">
    <el-date-picker
      @change="timeChangeFn"
      :disabled-date="disabledDate"
      v-model="value"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          let minDate = new Date("2019/10/01 00:00:00");
          if (time.getTime() < minDate.getTime()||time.getTime() > Date.now()) {
            return true;
          }
        },
        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]);
            },
          },
        ],
      },
      value: "", //设置默认值最近一周
    };
  },
  created() {
    // 初始化默认时间
    this.defaultDate();
  },
  methods: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7; // 8.64e7 毫秒数代表一天
    },

    timeChangeFn(value) {
      this.$emit("pick", value);
    },

    defaultDate() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.value = [start, end];
      this.$emit("pick", this.value);
    },
  },
};
</script>
<style scoped>
.block {
  width: 350px;
  display: flex;
}
</style>