vue实现多选日历

Vue 实现多选日历

使用 Vue 实现多选日历功能可以借助现有的日历库或手动构建。以下是两种常见方法：

使用第三方库（如 V-Calendar）

安装 V-Calendar 库：

npm install v-calendar

在 Vue 组件中引入并使用：

<template>
  <v-calendar
    :attributes="attributes"
    @dayclick="onDayClick"
    is-range
  />
</template>

<script>
import { ref } from 'vue';
import VCalendar from 'v-calendar';

export default {
  components: {
    VCalendar,
  },
  setup() {
    const selectedDates = ref([]);
    const attributes = ref([]);

    const onDayClick = (day) => {
      if (selectedDates.value.length === 2) {
        selectedDates.value = [];
      }
      selectedDates.value.push(day.date);

      if (selectedDates.value.length === 2) {
        attributes.value = [{
          key: 'selected',
          highlight: true,
          dates: selectedDates.value,
        }];
      }
    };

    return { selectedDates, attributes, onDayClick };
  },
};
</script>

手动实现基础多选日历

创建一个简单的日历组件，支持多选日期：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">Previous</button>
      <h2>{{ currentMonth }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="days">
      <div v-for="day in days" :key="day.date" 
           @click="toggleDate(day)"
           :class="{ selected: selectedDates.includes(day.date) }">
        {{ day.day }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const currentDate = ref(new Date());
    const selectedDates = ref([]);

    const days = computed(() => {
      const year = currentDate.value.getFullYear();
      const month = currentDate.value.getMonth();
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const daysInMonth = lastDay.getDate();

      const daysArray = [];
      for (let i = 1; i <= daysInMonth; i++) {
        daysArray.push({
          day: i,
          date: new Date(year, month, i).toDateString(),
        });
      }
      return daysArray;
    });

    const currentMonth = computed(() => {
      return currentDate.value.toLocaleString('default', { month: 'long', year: 'numeric' });
    });

    const toggleDate = (day) => {
      const index = selectedDates.value.indexOf(day.date);
      if (index === -1) {
        selectedDates.value.push(day.date);
      } else {
        selectedDates.value.splice(index, 1);
      }
    };

    const prevMonth = () => {
      currentDate.value = new Date(
        currentDate.value.getFullYear(),
        currentDate.value.getMonth() - 1,
        1
      );
    };

    const nextMonth = () => {
      currentDate.value = new Date(
        currentDate.value.getFullYear(),
        currentDate.value.getMonth() + 1,
        1
      );
    };

    return { currentDate, selectedDates, days, currentMonth, toggleDate, prevMonth, nextMonth };
  },
};
</script>

<style>
.calendar {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.days div {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.selected {
  background-color: #42b983;
  color: white;
}
</style>

处理日期范围选择

如果需要选择日期范围而非独立多选日期，可以修改 toggleDate 方法：

const toggleDate = (day) => {
  if (selectedDates.value.length >= 2) {
    selectedDates.value = [day.date];
  } else {
    selectedDates.value.push(day.date);
    if (selectedDates.value.length === 2) {
      selectedDates.value.sort((a, b) => new Date(a) - new Date(b));
    }
  }
};

使用 Vue DatePicker

另一种方法是使用专门的日期选择器库，如 vue-datepicker：

npm install vue-datepicker-next

示例代码：

<template>
  <date-picker v-model="date" range />
</template>

<script>
import { ref } from 'vue';
import DatePicker from 'vue-datepicker-next';

export default {
  components: { DatePicker },
  setup() {
    const date = ref([]);
    return { date };
  },
};
</script>