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 值。

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