如何在Vue中实现日期选择器

<template>  <div class="datepicker">    <input      type="text"      v-model="selectedDate"      @focus="showDatePicker"      @blur="hideDatePicker"    >    <div v-if="isDatePickerVisible" class="datepicker-popover">      <div class="datepicker-header">        <button @click="prevMonth"><</button>        <span>{{ currentMonth }}</span>        <button @click="nextMonth">></button>      </div>      <div class="datepicker-grid">        <div          v-for="(date, index) in calendar"          :key="index"          :class="{ 'datepicker-date': true, 'datepicker-disabled': date.disabled, 'datepicker-selected': date.selected }"          @click="selectDate(date)"        >          {{ date.day }}        </div>      </div>    </div>  </div></template><script>export default {  data() {    return {      selectedDate: "",      isDatePickerVisible: false,      currentMonth: "",      calendar: [],    };  },  mounted() {    this.initCalendar();  },  methods: {    initCalendar() {      const now = new Date();      const year = now.getFullYear();      const month = now.getMonth() + 1;      this.currentMonth = `${year}-${month}`;      const daysInMonth = new Date(year, month, 0).getDate();      const firstDayOfMonth = new Date(year, month - 1, 1).getDay();      const lastDayOfMonth = new Date(year, month, 0).getDay();      const calendar = [];      let dayCount = 1;      // 添加上个月的结尾日期      for (let i = firstDayOfMonth - 1; i >= 0; i--) {        calendar.push({          day: new Date(year, month - 1, 0 - i).getDate(),          disabled: true,          selected: false,        });      }      // 添加本月的日期      for (let i = 1; i <= daysInMonth; i++) {        calendar.push({          day: i,          disabled: false,          selected: false,        });      }      // 添加下个月的开始日期      for (let i = lastDayOfMonth + 1; i < 7; i++) {        calendar.push({          day: dayCount,          disabled: true,          selected: false,        });        dayCount++;      }      this.calendar = calendar;    },    showDatePicker() {      this.isDatePickerVisible = true;    },    hideDatePicker() {      this.isDatePickerVisible = false;    },    prevMonth() {      const [year, month] = this.currentMonth.split("-");      const prevMonth = `${year}-${parseInt(month) - 1}`;      this.currentMonth = prevMonth;      this.updateCalendar();    },    nextMonth() {      const [year, month] = this.currentMonth.split("-");      const nextMonth = `${year}-${parseInt(month) + 1}`;      this.currentMonth = nextMonth;      this.updateCalendar();    },    selectDate(date) {      if (!date.disabled) {        this.selectedDate = `${this.currentMonth}-${date.day}`;        this.calendar.forEach((item) => {          item.selected = false;        });        date.selected = true;      }    },    updateCalendar() {      this.initCalendar();      this.$nextTick(() => {        this.calendar.forEach((date, index) => {          const dateElem = this.$el.getElementsByClassName(            "datepicker-date"          )[index];          if (dateElem.classList.contains("datepicker-selected")) {            date.selected = true;          }        });      });    },  },};</script><style>.datepicker {  position: relative;  display: inline-block;}.datepicker input {  padding: 6px 12px;  border: 1px solid #ccc;}.datepicker-popover {  position: absolute;  top: 100%;  left: 0;  width: 220px;  padding: 10px;  background-color: #fff;  border: 1px solid #ccc;}.datepicker-header {  display: flex;  justify-content: space-between;  align-items: center;}.datepicker-grid {  display: grid;  grid-template-columns: repeat(7, 1fr);  grid-gap: 4px;  margin-top: 4px;}.datepicker-date {  display: flex;  justify-content: center;  align-items: center;  height: 30px;  border: 1px solid #ccc;  cursor: pointer;}.datepicker-disabled {  color: #ccc;  background-color: #f5f5f5;  cursor: not-allowed;}.datepicker-selected {  background-color: #e6f7ff;}</style>

<template>  <div>    <h1>日期选择器示例</h1>    <Datepicker></Datepicker>  </div></template><script>import Datepicker from "./Datepicker.vue";export default {  components: {    Datepicker,  },};</script>