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

最新推荐文章于 2024-11-26 11:35:32 发布

贝塔贝卡贝

最新推荐文章于 2024-11-26 11:35:32 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/120074590

此博客介绍了如何在Vue应用中使用v-date-picker组件，同时确保开始时间早于结束时间，实现日期范围筛选的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
同时需要对开始时间和结束时间选择做处理，结束时间不得小于开始时间，开始时间不能超过结束时间
index.vue:

<template>
  <div>
  	<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="mr-4 mt-5"
            style="width: 200px; flex: none; background: none"
            v-model="start_time"
            placeholder="开始时间"
            append-icon="mdi-calendar-clock"
            readonly
            rows="1"
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="start_time"
          :allowed-dates="allowedStartDate"
          no-title
          scrollable
          :show-current="false"
          @input="show_start_datepicker = false"
          :day-format="date => date.split('-')[2]"
          locale="zh-cn"
        >
        </v-date-picker>
      </v-menu>
      <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="mr-4 mt-5"
            style="width: 200px; flex: none; background: none"
            v-model="end_time"
            placeholder="结束时间"
            append-icon="mdi-calendar-clock"
            readonly
            rows="1"
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="end_time"
          :allowed-dates="allowedEndDate"
          no-title
          scrollable
          :show-current="false"
          @input="show_end_datepicker = false"
          :day-format="date => date.split('-')[2]"
          locale="zh-cn"
        >
        </v-date-picker>
      </v-menu>
  </div>
</template>

<script>
export default {
  name: "AuditLogLogin",
  data() {
    return {
      show_start_datepicker: false,
      show_end_datepicker: false,
      start_time: null,
      end_time: null,
    };
  },
  methods: {
    allowedStartDate(val) {
      if (this.end_time) {
        let cur = new Date(val).getTime();
        let end = new Date(this.end_time).getTime();

        return cur < end;
      }
      return true;
    },
    allowedEndDate(val) {
      if (this.start_time) {
        let cur = new Date(val).getTime();
        let end = new Date(this.start_time).getTime();
        return cur > end;
      }
      return true;
    }
  }
 
};
</script>