时间段控件

components/page/dtSearch.vue

 <template>
-  <div>
     <DatePicker
-      type="datetimerange"
-      :format="type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
-      v-model="name"
+      :type="type === 'date' ?'daterange':'datetimerange'"
+      :options="options01"
+      placement="bottom-end"
+      :format="type === 'date' ? 'yyyy/MM/dd' : 'yyyy/MM/dd HH:mm:ss'"
       placeholder="选择时间段"
+      v-model="dataValue"
+      :clearable="true"
+      @on-clear="onClear"
       @on-change="changeFormat"
-      style="float:left"
+      class="wp"
     ></DatePicker>
-    <div v-if="showFast">
-      <RadioGroup
-        type="button"
-        size="small"
-        style="margin-left:5px;line-height:35px;"
-        @on-change="getTime"
-      >
-        <Radio label="当天"></Radio>
-        <Radio label="近一周"></Radio>
-        <Radio label="近一月"></Radio>
-      </RadioGroup>
-      <!-- <Button size="small" type="text" @click="getTime('1')">当天</Button>
-      <Button size="small" type="text" @click="getTime('2')">近一周</Button>
-      <Button size="small" type="text" @click="getTime('3')">近一月</Button> -->
-    </div>
-  </div>
 </template>
 <script>
 export default {
@@ -34,14 +21,50 @@ export default {
   },
   data() {
     return {
-      name: this.value
+      dataValue: this.value,
+      options01: {
+        shortcuts: [
+          {
+            text: '当天',
+            value() {
+              const start = new Date(
+                new Date(new Date().toLocaleDateString()).getTime()
+              )
+              const end = new Date()
+              return [start, end]
+            }
+          },
+          {
+            text: '近一周',
+            value() {
+              const start = new Date(
+                new Date(new Date().toLocaleDateString()).getTime()
+              )
+              const end = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              return [start, end]
+            }
+          },
+          {
+            text: '近一月',
+            value() {
+              const start = new Date(
+                new Date(new Date().toLocaleDateString()).getTime()
+              )
+              const end = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              return [start, end]
+            }
+          }
+        ]
+      }
     }
   },
   props: {
     value: [String, Number, Array],
     type: {
       type: String,
-      default: 'dateTime'
+      default: 'date'
     },
     showFast: {
       type: Boolean,
@@ -51,47 +74,37 @@ export default {
   created() {},
   methods: {
     changeFormat(val) {
-      let newVal = []
-      if (val != ',') {
-        if (this.type == 'date') {
-          newVal.push(val[0].substr(0, 10) + ' 00:00:00')
-          newVal.push(val[1].substr(0, 10) + ' 23:59:59')
-        } else {
-          newVal = val
+      console.log(val)
+      if (val) {
+        let newVal = []
+        if (val.length==2) {
+          if (this.type == 'date') {
+            if(val[0]){
+              newVal.push(val[0].substr(0, 10) + ' 00:00:00')
+              newVal.push(val[1].substr(0, 10) + ' 23:59:59')
+            }else{
+              newVal = []
+            }
+          } else {
+            newVal = val
+          }
         }
+        this.dataValue = newVal
+        val=newVal;
       }
-
-      this.name = newVal
-      this.$emit('on-change', newVal)
+       this.$emit('on-change', val)
     },
-    getTime(val) {
-      let timeVal = []
-      let day1 = new Date()
-      let day2 = new Date()
-      let day3 = new Date()
-      let today = day1.setDate(day1.getDate())
-      today = this.$u.toTime(today)
-      let week = day2.setDate(day2.getDate() - 6)
-      week = this.$u.toTime(week)
-      let month = day3.setMonth(day3.getMonth() - 1)
-      month = this.$u.toTime(month)
-      switch (val) {
-        case '当天':
-          timeVal = [today, today]
-          break
-        case '近一周':
-          timeVal = [week, today]
-          break
-        default:
-          timeVal = [month, today]
-      }
-      this.changeFormat(timeVal)
+
+    onClear() {
+      this.$nextTick(() => {
+        this.dataValue = null
+      })
     }
   },
   computed: {},
   watch: {
-    name(v) {
-      // this.name = v
+    dataValue(v) {
+      // this.dataValue = v
     }
   }
 }

components/page/dtSearchold.vue

+<template>
+  <div>
+    <DatePicker
+      type="datetimerange"
+      :format="type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
+      v-model="name"
+      placeholder="选择时间段"
+      @on-change="changeFormat"
+      style="float:left"
+    ></DatePicker>
+    <div v-if="showFast">
+      <RadioGroup
+        type="button"
+        size="small"
+        style="margin-left:5px;line-height:35px;"
+        @on-change="getTime"
+      >
+        <Radio label="当天"></Radio>
+        <Radio label="近一周"></Radio>
+        <Radio label="近一月"></Radio>
+      </RadioGroup>
+      <!-- <Button size="small" type="text" @click="getTime('1')">当天</Button>
+      <Button size="small" type="text" @click="getTime('2')">近一周</Button>
+      <Button size="small" type="text" @click="getTime('3')">近一月</Button> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'dtSearch',
+  model: {
+    prop: 'value',
+    event: 'on-change'
+  },
+  data() {
+    return {
+      name: this.value
+    }
+  },
+  props: {
+    value: [String, Number, Array],
+    type: {
+      type: String,
+      default: 'dateTime'
+    },
+    showFast: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created() {},
+  methods: {
+    changeFormat(val) {
+      let newVal = []
+      if (val != ',') {
+        if (this.type == 'date') {
+          newVal.push(val[0].substr(0, 10) + ' 00:00:00')
+          newVal.push(val[1].substr(0, 10) + ' 23:59:59')
+        } else {
+          newVal = val
+        }
+      }
+
+      this.name = newVal
+      this.$emit('on-change', newVal)
+    },
+    getTime(val) {
+      let timeVal = []
+      let day1 = new Date()
+      let day2 = new Date()
+      let day3 = new Date()
+      let today = day1.setDate(day1.getDate())
+      today = this.$u.toTime(today)
+      let week = day2.setDate(day2.getDate() - 6)
+      week = this.$u.toTime(week)
+      let month = day3.setMonth(day3.getMonth() - 1)
+      month = this.$u.toTime(month)
+      switch (val) {
+        case '当天':
+          timeVal = [today, today]
+          break
+        case '近一周':
+          timeVal = [week, today]
+          break
+        default:
+          timeVal = [month, today]
+      }
+      this.changeFormat(timeVal)
+    }
+  },
+  computed: {},
+  watch: {
+    name(v) {
+      // this.name = v
+    }
+  }
+}
+</script>