Vuetify——v-date-picker日期组件

需求：时间范围开始时间和结束时间不能超出当天，而且开始时间大于等于结束时间，结束时间小于等于开始时间

<span class="input-label ml-2">时间范围</span>
<v-menu
  class="datepicker-menu"
  ref="menu"
  v-model="show_start_datepicker"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
  min-width="auto"
>
  <template v-slot:activator="{ on, attrs }">
    <v-text-field
      class="input-field-timemenu"
      v-model="start_time"
      readonly
      rows="1"
      v-bind="attrs"
      v-on="on"
      style="width: 170px !important"
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="start_time"
    :allowed-dates="allowedStartDate"
    no-title
    scrollable
    :show-current="false"
    @input="startTimeChange"
    :day-format="(date) => date.split('-')[2]"
    locale="zh-cn"
  >
  </v-date-picker>
</v-menu>
<span class="ml-2 pt-2">-</span>
<v-menu
  class="datepicker-menu"
  ref="menu"
  v-model="show_end_datepicker"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
  min-width="auto"
>
  <template v-slot:activator="{ on, attrs }">
    <v-text-field
      class="input-field-timemenu"
      v-model="end_time"
      readonly
      v-bind="attrs"
      v-on="on"
      style="width: 170px !important"
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="end_time"
    :allowed-dates="allowedEndDate"
    no-title
    scrollable
    :show-current="false"
    @input="endTimeChange"
    :day-format="(date) => date.split('-')[2]"
    locale="zh-cn"
  >
  </v-date-picker>
</v-menu>


<script>
export default {
	data(){
		return{
		  show_start_datepicker: false,
	      show_end_datepicker: false,
	      start_time: "",
	      end_time: ""
		}
	},
	methods:{
		startTimeChange(start_time) {
	      this.show_start_datepicker = false;
	      this.page = 1;
	      this.fetchLogs(
	        1,
	        this.itemsPerPage,
	        this.client_ip,
	        this.host,
	        this.status,
	        start_time,
	        this.end_time,
	        this.uri,
	        this.city,
	        this.browser_name,
	        this.os,
	        this.category,
	        this.ip_version
	      );
	    },
	    endTimeChange(end_time) {
	      this.show_end_datepicker = false;
	      this.page = 1;
	      this.fetchLogs(
	        1,
	        this.itemsPerPage,
	        this.client_ip,
	        this.host,
	        this.status,
	        this.start_time,
	        end_time,
	        this.uri,
	        this.city,
	        this.browser_name,
	        this.os,
	        this.category,
	        this.ip_version
	      );
	    },
	    fetchLogs(
	      page_num = 1,
	      page_size = 25,
	      client_ip = "",
	      host = "",
	      status = "",
	      start_time = "",
	      end_time = "",
	      uri = "",
	      city = "",
	      browser_name = "",
	      os = "",
	      category = "",
	      ip_version = "",
	      need_count = 1
	    ) {
	      return this.$http
	        .get(`/api/aaapage_num=${page_num}&page_size=${page_size}&client_ip=${client_ip}&host=${host}&status=${
	            status }&start_time=${start_time}&end_time=${
	            end_time
	          }&uri=${uri}&city=${city}&browser_name=${
	            browser_name 
	          }&os=${os}&category=${
	            category 
	          }&ip_version=${
	            ip_version
	          }&need_count=${need_count}`
	        )
	        .delegateTo(api_request)
	        .then(({ total, result, max_result }) => {
	          this.maxResult = Math.ceil(max_result / page_size);
	          this.logs = result;
	          if (need_count) {
	            this.pageCount = Math.ceil(total / page_size);
	          }
	        })
	        .catch(({ code, message }) => {
	            throw `获取数据失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
	              "api." + typeof message === "string"
	                ? message
	                : JSON.stringify(message)
	            )}`;
	        })
	        .delegateTo(this.$snackbar.delegateError);
	    },
	    allowedStartDate(val) {
      let cur = new Date(val).getTime();
      if (this.end_time) {
        let end = new Date(this.end_time).getTime();
        return cur <= end;
      } else {
        return cur <= Date.parse(new Date());
      }
    },
    allowedStartDate(val) {
      let cur = new Date(val).getTime();
      if (this.end_time) {
        let end = new Date(this.end_time).getTime();
        return cur <= end;
      } else {
        return cur <= Date.parse(new Date());
      }
    },
    allowedEndDate(val) {
      let cur = new Date(val).getTime();
      if (this.start_time) {
        let end = new Date(this.start_time).getTime();
        return cur <= Date.parse(new Date()) && cur >= end;
      } else {
        return cur <= Date.parse(new Date());
      }
    }
	}
}
</script>