uniapp小程序日历表的代码

<p>以下是一个简单的uniapp小程序日历表的代码示例：</p>
<template>
  <view class="container">
    <view class="header">
      <view class="prev" @tap="prevMonth">上个月</view>
      <view class="current">{{year}}年{{month}}月</view>
      <view class="next" @tap="nextMonth">下个月</view>
    </view>
    <view class="weekdays">
      <view v-for="(day, index) in weekdays" :key="index" class="weekday">{{day}}</view>
    </view>
    <view class="dates">
      <view v-for="(date, index) in dates" :key="index" class="date" :class="{active: date.active}" @tap="selectDate(date)">{{date.day}}</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      daysInMonth: 0,
      firstDayOfMonth: 0,
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      dates: []
    }
  },
  mounted() {
    this.getDaysInMonth();
    this.getFirstDayOfMonth();
    this.generateDates();
  },
  methods: {
    prevMonth() {
      this.month--;
      if (this.month < 1) {
        this.year--;
        this.month = 12;
      }
      this.getDaysInMonth();
      this.getFirstDayOfMonth();
      this.generateDates();
    },
    nextMonth() {
      this.month++;
      if (this.month > 12) {
        this.year++;
        this.month = 1;
      }
      this.getDaysInMonth();
      this.getFirstDayOfMonth();
      this.generateDates();
    },
    getDaysInMonth() {
      this.daysInMonth = new Date(this.year, this.month, 0).getDate();
    },
    getFirstDayOfMonth() {
      this.firstDayOfMonth = new Date(this.year, this.month - 1, 1).getDay();
    },
    generateDates() {
      this.dates = [];
      for (let i = 0; i < this.firstDayOfMonth; i++) {
        this.dates.push({ day: '' });
      }
      for (let i = 1; i <= this.daysInMonth; i++) {
        this.dates.push({ day: i, active: false });
      }
    },
    selectDate(date) {
      if (date.day !== '') {
        this.dates.forEach(d => { d.active = false; });
        date.active = true;
        // do something with the selected date
      }
    }
  }
}
</script>
<style>
.container {
  margin: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.current {
  font-size: 24px;
}
.weekdays {
  display: flex;
}
.weekday {
  width: 14.2857%;
  text-align: center;
}
.dates {
  display: flex;
  flex-wrap: wrap;
}
.date {
  width: 14.2857%;
  text-align: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.date.active {
  background-color: #ccc;
}
</style>