使用Vue写一个日期选择器

<template>
  <div>
    <input type="text" v-model="selectedDate" @click="showDatePicker" placeholder="选择日期">
    <div v-if="isDatePickerVisible" class="date-picker">
      <div class="header">
        <button @click="prevMonth"><</button>
        <span>{{ currentMonth }}</span>
        <button @click="nextMonth">></button>
      </div>
      <div class="days">
        <div v-for="day in daysInMonth" :key="day" class="day" @click="selectDate(day)">
          {{ day }}
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedDate: '',
      currentMonth: '',
      isDatePickerVisible: false
    };
  },
  computed: {
    daysInMonth() {
      const date = new Date(this.currentMonth);
      const year = date.getFullYear();
      const month = date.getMonth();
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      return Array.from({ length: daysInMonth }, (_, index) => index + 1);
    }
  },
  methods: {
    showDatePicker() {
      this.isDatePickerVisible = true;
      this.currentMonth = new Date();
    },
    prevMonth() {
      const prevMonth = new Date(this.currentMonth);
      prevMonth.setMonth(prevMonth.getMonth() - 1);
      this.currentMonth = prevMonth;
    },
    nextMonth() {
      const nextMonth = new Date(this.currentMonth);
      nextMonth.setMonth(nextMonth.getMonth() + 1);
      this.currentMonth = nextMonth;
    },
    selectDate(day) {
      const selectedDate = new Date(this.currentMonth);
      selectedDate.setDate(day);
      const formattedDate = selectedDate.toLocaleDateString('en-US');
      this.selectedDate = formattedDate;
      this.isDatePickerVisible = false;
    }
  }
};
</script>
 
<style scoped>
.date-picker {
  position: absolute;
  top: 40px;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}
 
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
 
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
 
.day {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 40px;
  border: 1px solid #ccc;
}
 
input {
  padding: 5px;
  border: 1px solid #ccc;
}
</style>