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

首先，你需要在 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>

在上面的代码中，子组件是一个日历组件，它可以显示一个月的日历。当用户点击一个日期时，使用 selectDate 方法来设置 selectedDate 值，并通过 $emit 方法将所选日期传递给父组件。在父组件中，我们创建了一个时间输入框，并使用 selectedDate 的值来更新它的 v-model 值。

这样，当用户点击日历中的日期时，所选日期的值就会自动渲染到时间输入框中。