uniapp写的微信小程序，日历视图选择日期

基于uniapp开发的微信小程序项目，新建一个vue组件页面，弄一个可以多选日期的日历视图，选中的日期会有圆圈标记在日期上，日期按照星期日、星期一、星期二、星期三、星期四、星期五、星期六的排序来排，一共有7行日期，一行7个日期，总共就是49个日期。今天日期的那一行永远是第一行。例如今天是2023年7月28号，那28就在第一行，而第一行的前后日期也要补全。
**
当前问题：当天日期不在日期的第一行，只要当天日期在第一行日期行，就补全前后日期就行，而且每个月的1号的1都替换为几月，7月1号的1替换为7月。
**

<template>
    <view class="body">
        <uviewbar title="日期" :goindex="true"></uviewbar>
        <view class="date-table">
            <!-- 星期标题 -->
            <view class="header">
                <view class="cell" v-for="(day, index) in daysOfWeek" :key="index">{{ day }}</view>
            </view>
            <!-- 日期数据 -->
            <view class="row" v-for="(week, weekIndex) in calendar" :key="weekIndex">
                <view class="cell" v-for="(day, dayIndex) in week" :key="dayIndex" @click="toggleSelect(day)">
                    <view :class="{ 'circle': day.selected, 'today': day.today }">{{ day.text }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                today: new Date().getDate(),
                currentMonth: new Date().getMonth() + 1,
                currentYear: new Date().getFullYear(),
                calendar: [],
            };
        },
        computed: {
            selectedDates() {
                return this.calendar
                    .flat()
                    .filter((day) => day.selected)
                    .map((day) => day.date);
            },
        },
        mounted() {
            this.generateCalendar();
        },
        methods: {
            generateCalendar() {
                this.calendar = [];
                const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1).getDay();
                const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();
                const daysInPrevMonth = new Date(this.currentYear, this.currentMonth - 1, 0).getDate();

                let week = [];
                // 补全前一个月的日期
                for (let i = firstDay; i > 0; i--) {
                    const date = daysInPrevMonth - i + 1;
                    week.push({
                        date: "",
                        text: date,
                        selected: false,
                        today: false,
                    });
                }

                for (let i = 1; i <= daysInMonth; i++) {
                    const date = new Date(this.currentYear, this.currentMonth - 1, i);
                    week.push({
                        date: i,
                        text: i === 1 ? `${this.currentMonth}月` : i,
                        selected: false,
                        today: i === this.today && this.currentMonth === new Date().getMonth() + 1,
                    });

                    if (week.length === 7) {
                        this.calendar.push(week);
                        week = [];
                    }
                }

                // 补全下一个月的日期
                if (week.length > 0) {
                    const remainingDays = 7 - week.length;
                    for (let i = 1; i <= remainingDays; i++) {
                        week.push({
                            date: "",
                            text: i,
                            selected: false,
                            today: false,
                        });
                    }
                    this.calendar.push(week);
                }
            },

            toggleSelect(day) {
                day.selected = !day.selected;
            },
        },
    };
</script>

<style>
    .date-table {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .header {
        display: flex;
        width: 100%;
        background-color: #f0f0f0;
        padding: 10px 0;
    }

    .cell {
        flex: 1;
        text-align: center;
    }

    .row {
        display: flex;
        width: 100%;
        border-top: 1px solid #ccc;
        padding: 10px 0;
    }

    .cell {
        flex: 1;
        text-align: center;
        cursor: pointer;
    }

    .circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #dab394;
        margin: 5px auto;
    }
</style>


<template>
  <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">{{ day }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      daysOfWeek: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      date: new Date()
    }
  },
  computed: {
    weeks() {
      const weeks = []
      const date = new Date()
      for (let i = 0; i < 42; i++) {
        let d
        if (i < date.getDay()) {
          d = new Date(date.getTime() - 60 * 60 * 24 * 1000 * (date.getDay() - i))
        }
        if (i > date.getDay()) {
          d = new Date(date.getTime() + 60 * 60 * 24 * 1000 * (i - date.getDay()))
        }
        if (i == date.getDay()) {
          d = date
        }
        d = d.getDate() === 1 ? `${d.getMonth() + 1}月` : d.getDate()
        weeks.push(d)
      }
      return weeks.reduce((acc, cur, i) => {
        if (i % 7 === 0) {
          acc.push([cur])
        } else {
          acc[acc.length - 1].push(cur)
        }
        return acc
      }, [])
    }
  }
}
</script>

<style scoped lang="less">
td,
th {
  width: 80px;
  border: 1px solid #9b9b9b;
}
</style>

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以看下这个问题的回答https://ask.csdn.net/questions/7416554

除此之外, 这篇博客: 微信小程序获取当前日期和时间，并显示星期几中的 一、获取当前日期和时间 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

实现效果（没加样式）
在这里插入图片描述

1:准备好要获取时间的.js文件中加载util.js文件，文件目录中有默认的代码
在这里插入图片描述

util.js

const formatTime =date=>{
  const year= date.getFullYear()
  const month=date.getMonth()+1
  const day=date.getDate()
  const hour=date.getHours()
  const minute=date.getMinutes()
  const second = date.getSeconds()

  return [year,month,day].map(formatNumber).join('/')+' '+[hour,minute,second].map(formatNumber).join(':')
}

const formatNumber = n =>{
  n=n.toString()
  return n[1]?n : '0'+n
}

module.exports = {
  formatTime:formatTime
}

2.展示的页面

wxml

<view>{{time[0]}}-{{time[1]}}-{{time[2]}}</view>

3.展示页面的js
js

var util = require('../../utils/util.js');

Page({
  data: {

  },
  onLoad: function () {
    // 调用函数时，传入new Date()参数，返回值是日期和时间
    var time = util.formatTime(new Date());
    // 再通过setData更改Page()里面的data，动态更新页面的数据
    this.setData({
      time: time
    });
  }

})

4.对时间切片

time=time.split(" ")[0].split("/")//变数组
console.log(time)

切片效果
在这里插入图片描述

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^