vue使日历组件点击时间渲染到时间输入框

<!-- 在父组件模板中创建一个时间输入框 -->
<template>
  <div>
    <label>选择日期：</label>
    <input type="text" v-model="selectedDate">
    <my-calendar @date-selected="updateSelectedDate"></my-calendar>
  </div>
</template>
<script>
import MyCalendar from './MyCalendar.vue'
export default {
  components: {
    MyCalendar
  },
  data() {
    return {
      selectedDate: ''
    }
  },
  methods: {
    updateSelectedDate(date) {
      this.selectedDate = date
    }
  }
}
</script>

<!-- 在子组件中编写日历组件 -->
<template>
  <div class="calendar">
    <div>{{ month }} {{ year }}</div>
    <div>
      <button @click="prev"><</button>
      <button @click="next">></button>
    </div>
    <table>
      <thead>
        <tr>
          <th v-for="day in daysOfWeek">{{ day }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in weeks">
          <td v-for="day in week"
              @click="selectDate(day)"
              :class="{ 'selected': isSelected(day) }">
            {{ day }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      today: new Date(),
      selectedDate: null,
      daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  },
  computed: {
    weeks() {
      let weeks = []
      let week = []
      let firstDayOfMonth = new Date(this.year, this.month, 1)
      let lastDayOfMonth = new Date(this.year, this.month + 1, 0)
      let dayOfWeek = firstDayOfMonth.getDay()
      let daysInMonth = lastDayOfMonth.getDate()
      for (let i = 1; i <= daysInMonth; i++) {
        let date = new Date(this.year, this.month, i)
        week.push(i)
        if (dayOfWeek === 6 || i === daysInMonth) {
          weeks.push(week)
          week = []
        }
        dayOfWeek = (dayOfWeek + 1) % 7
      }
      return weeks
    },
    month() {
      return this.today.getMonth()
    },
    year() {
      return this.today.getFullYear()
    }
  },
  methods: {
    prev() {
      this.today = new Date(this.year, this.month - 1, 1)
    },
    next() {
      this.today = new Date(this.year, this.month + 1, 1)
    },
    selectDate(day) {
      this.selectedDate = new Date(this.year, this.month, day)
      this.$emit('date-selected', this.selectedDate)
    },
    isSelected(day) {
      return this.selectedDate && this.selectedDate.getDate() === day
    }
  }
}
</script>