md

src/components/DatePickerAdv/elDate7DayPicker.vue

@@ -0,0 +1,92 @@
+<template>
+ <div class="date-box">
+    <el-date-picker
+
+        v-model="dateRange"
+        :picker-options="pickerOptions"
+        type="datetimerange"
+        :default-time="['00:00:00', '23:59:59']"
+        value-format="yyyy-MM-dd HH:mm:ss"
+
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        ref="timeRangePicker"
+
+        @change="dateChange"
+        style="width: 100%;"
+      >
+      </el-date-picker>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import {timeFormat} from '@/utils/dateUtils'
+
+export default {
+  name: "ElDate7DayPicker",
+  props: {
+    value:{
+      type:Array
+    }
+  },
+  data() {
+    return {
+      dateRange: this.value,
+      pickerMinDate: null,
+      pickerOptions: {
+        onPick: ({ maxDate, minDate }) => {
+          this.pickerMinDate = new Date(minDate).getTime();
+        },
+        disabledDate: time => {
+          if (this.pickerMinDate) {
+            const day1 = 7 * 24 * 3600 * 1000;
+            let maxTime = this.pickerMinDate + day1;
+            let minTime = this.pickerMinDate - day1;
+            return time.getTime() > maxTime || time.getTime() < minTime;
+          }else{
+            return time.getTime() > Date.now()
+          }
+        }
+    },
+    }
+  },
+  watch: {
+      value(newVal) {
+        this.dateRange = this.value;
+        if(this.dateRange&&this.dateRange.length==2){
+          this.dateRange[0]=timeFormat(this.dateRange[0]);
+          this.dateRange[1]=timeFormat(this.dateRange[1]);
+        }
+      },
+  },
+  created() {
+  },
+  methods: {
+
+    dateChange(value) {
+      if(this.dateRange&&this.dateRange.length==2){
+        this.dateRange[0]=timeFormat(this.dateRange[0]);
+        this.dateRange[1]=timeFormat(this.dateRange[1]);
+      }
+      this.$emit("input", this.dateRange);
+      this.$emit('dateTimeChange', this.dateRange)
+		},
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.datetimepicker {
+  width: 300px;
+  .el-select .el-input__inner {
+    border-radius: 4px 0 0 4px;
+  }
+  .el-date-editor .el-input__inner {
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+  }
+}
+</style>
+