uniapp应用如何实现时间选择和日历显示

<template><view><picker mode="time"></picker></view></template><script>export default {  methods: {    onSelectTime(e) {      console.log('选择的时间为：', e.detail.value)    }  }}</script>

<template><view><picker-view :value="timeIndex"><picker-view-column><view v-for="(hour, index) in hours" :key="index">{{ hour }}</view></picker-view-column><picker-view-column><view v-for="(minute, index) in minutes" :key="index">{{ minute }}</view></picker-view-column><picker-view-column><view v-for="(second, index) in seconds" :key="index">{{ second }}</view></picker-view-column></picker-view></view></template><script>export default {  data() {    return {      timeIndex: [0, 0, 0],      hours: ['00', '01', '02', ...],      minutes: ['00', '01', '02', ...],      seconds: ['00', '01', '02', ...]    }  },  methods: {    onSelectTime(e) {      const values = e.detail.value      const selectedHour = this.hours[values[0]]      const selectedMinute = this.minutes[values[1]]      const selectedSecond = this.seconds[values[2]]      const selectedTime = `${selectedHour}:${selectedMinute}:${selectedSecond}`      console.log('选择的时间为：', selectedTime)    }  }}</script>

npm install @vue/calendar --save

<template><view><vue-calendar></vue-calendar></view></template><script>import VueCalendar from '@vue/calendar'export default {  components: {    VueCalendar  }}</script>

<template><view><view class="calendar-header"><text class="calendar-prev">上个月</text><text class="calendar-title">{{ currentYear }}年{{ currentMonth }}月</text><text class="calendar-next">下个月</text></view><view class="calendar-weekdays"><text v-for="(weekday, index) in weekdays" :key="index" class="calendar-weekday">{{ weekday }}</text></view><view class="calendar-days"><text v-for="day in getDaysInMonth(currentYear, currentMonth)" :key="day" class="calendar-day">{{ day }}</text></view></view></template><script>export default {  data() {    return {      currentYear: new Date().getFullYear(),      currentMonth: new Date().getMonth() + 1,      weekdays: ['日', '一', '二', '三', '四', '五', '六']    }  },  methods: {    prevMonth() {      // 上个月操作    },    nextMonth() {      // 下个月操作    },    getDaysInMonth(year, month) {      // 获取某个月份的天数    }  }}</script><style scoped>/* 添加自定义样式 */</style>