vue+elementui DateTimePicker 日期时间选择器使用

最新推荐文章于 2024-09-05 09:34:10 发布

wqr1128

最新推荐文章于 2024-09-05 09:34:10 发布

阅读量3.3k

点赞数

分类专栏： vue+elementui 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/wqr1128/article/details/120969400

版权

vue+elementui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DateTimePicker使用中需要实现以下几点：

有快捷选项（最近一周、一个月、三个月）
开始时间为00:00:00，结束时间为23:59:59
限制开始日期和结束日期的可选区域

实现效果：

实现：

<el-date-picker 
  v-model="effectiveDate" 
  type="datetimerange"
  :default-time="['00:00:00', '23:59:59']" 
  :picker-options="pickerOptions"
  range-separator="至" 
  start-placeholder="开始日期" 
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>

pickerOptions: {
  shortcuts: [
    {
      text: "最近一周",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近一个月",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近三个月",
      onClick(picker) {
        const start = new Date();
        const end = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
        picker.$emit("pick", [start, end]);
      }
    }
  ],
  disabledDate: time => {
    return (
      time.getTime() < Date.now() - 8.64e7 ||
      time.getTime() >        
        new Date(this.tenantObj.endTime + " 23:59:59").getTime() - 0
    );
  }
}