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

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

  1. 有快捷选项(最近一周、一个月、三个月)
  2. 开始时间为00:00:00,结束时间为23:59:59
  3. 限制开始日期和结束日期的可选区域 

 实现效果:

vue+elementui DateTimePicker 日期时间选择器使用_第1张图片

实现:


  
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
    );
  }
}

你可能感兴趣的:(vue+elementui,vue.js,elementui,javascript)