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

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

 实现效果:

实现:

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

Logo

前往低代码交流专区

更多推荐