当前位置： 首页 > news >正文

微信小程序实现自定义日历功能

news 2025/6/21 17:53:59

文章目录

    • 1. 创建日历组件实现步骤：
    • 2. 代码实现过程
    • 3. 实现效果图
    • 4. 关于作者其它项目视频教程介绍

1. 创建日历组件实现步骤：

  1. 创建日历组件：首先，你需要创建一个日历组件，包含显示日期的逻辑。
  2. 样式设计：为日历组件设计样式，使其看起来美观。
  3. 事件处理：添加事件处理程序，以便用户可以选择日期。

2. 代码实现过程

  1. 编写calendar.wxml布局
<!-- calendar.wxml -->
<navigation-bar title="日历控件" back="{{false}}" color="#FFFFFF" background="#e6142c"></navigation-bar><!-- 日历部分 --><view class="calendar"><!-- 日历头部 --><view class="calendar-header"><view class="arrow" bindtap="prevMonth">〈</view><view class="date-title">{{year}}年{{month}}月</view><view class="arrow" bindtap="nextMonth">〉</view></view><!-- 星期标题 --><view class="weekday-row"><view class="weekday" wx:for="{{weekdays}}" wx:key="*this">{{item}}</view></view><!-- 日期格子 --><view class="date-rows"><view class="date-row" wx:for="{{dateList}}" wx:for-item="row" wx:key="index"><view class="date-cell {{item.currentMonth ? '' : 'other-month'}} {{item.isToday ? 'today' : ''}} {{item.selected ? 'selected' : ''}}" wx:for="{{row}}" wx:key="date" bindtap="selectDate" data-date="{{item.date}}">{{item.day}}</view></view></view></view>
  1. 编写calendar.wxss样式
/* calendar.wxss */
page {height: 100vh;display: flex;flex-direction: column;background-color: #f5f5f5;
}.calendar {background: #f5f5f5;border-radius: 10rpx;padding: 20rpx;
}.calendar-header {display: flex;align-items: center;justify-content: space-between;padding: 20rpx 0;
}.date-title {font-size: 32rpx;font-weight: bold;
}.arrow {padding: 10rpx 20rpx;color: #666;
}.weekday-row {display: flex;border-bottom: 1rpx solid #eee;padding-bottom: 10rpx;margin-bottom: 10rpx;
}.weekday {flex: 1;text-align: center;font-size: 28rpx;color: #666;
}.date-rows {display: flex;flex-direction: column;
}.date-row {display: flex;margin: 5rpx 0;
}.date-cell {flex: 1;text-align: center;padding: 15rpx 0;font-size: 28rpx;position: relative;height: 65rpx;line-height: 65rpx;margin: 5rpx;
}.selected {background: #e6142c;color: #fff !important;/* 确保选中时文字颜色为白色 */border-radius: 50%;
}/* 确保今天的样式和选中样式可以共存 */
.today {color: #e6142c;font-weight: bold;
}.today.selected {color: #fff !important;background: #e6142c;
}/* 其他月份日期的样式 */
.other-month {color: #ccc;
}.other-month.selected {background: #1aad19;color: #fff !important;
}
  1. 编写calendar.js具体逻辑实现
// calendar.js
Page({data: {year: 2024,month: 1,day: 1,weekdays: ['日', '一', '二', '三', '四', '五', '六'],dateList: [],selectedDate: null,dateStr: '',},onLoad() {// 初始化当前日期const now = new Date()this.setData({year: now.getFullYear(),month: now.getMonth() + 1,selectedDate: now // 设置当前日期为选中状态}, () => {this.generateDateList()})wx.showToast({title: this.data.selectedDate.toLocaleDateString(),icon:"none"})},// 生成日历数据generateDateList() {const {year,month} = this.dataconst dateList = []// 获取当月第一天和最后一天const firstDay = new Date(year, month - 1, 1)const lastDay = new Date(year, month, 0)// 获取当月第一天是星期几const firstDayWeek = firstDay.getDay()// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month - 1, 0).getDate()// 当前日期const today = new Date()const currentDateStr = today.toDateString()// 填充上个月的日期let row = []for (let i = 0; i < firstDayWeek; i++) {const day = prevMonthLastDay - firstDayWeek + i + 1const date = new Date(year, month - 2, day)row.push({day,date: date,currentMonth: false,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})}// 填充当月日期for (let day = 1; day <= lastDay.getDate(); day++) {const date = new Date(year, month - 1, day)row.push({day,date: date,currentMonth: true,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})if (row.length === 7) {dateList.push(row)row = []}}// 填充下个月的日期let nextMonthDay = 1while (row.length < 7) {const date = new Date(year, month, nextMonthDay)row.push({day: nextMonthDay++,date: date,currentMonth: false,isToday: date.toDateString() === currentDateStr,selected: this.data.selectedDate && date.toDateString() === this.data.selectedDate.toDateString()})}dateList.push(row)this.setData({dateList})},// 选择日期selectDate(e) {const selectedDate = new Date(e.currentTarget.dataset.date)this.setData({selectedDate: selectedDate}, () => {this.generateDateList()//格式化日期const date = new Date(selectedDate.toLocaleDateString())wx.showToast({title: selectedDate.toLocaleDateString(),icon:"none"})})},// 生成日历数据generateDateList() {const {year,month} = this.dataconst dateList = []// 获取当月第一天和最后一天const firstDay = new Date(year, month - 1, 1)const lastDay = new Date(year, month, 0)// 获取当月第一天是星期几const firstDayWeek = firstDay.getDay()// 获取上个月的最后几天const prevMonthLastDay = new Date(year, month - 1, 0).getDate()// 当前日期const today = new Date()const currentDateStr = today.toDateString()// 选中的日期字符串（用于比较）const selectedDateStr = this.data.selectedDate ? this.data.selectedDate.toDateString() : ''// 填充上个月的日期let row = []for (let i = 0; i < firstDayWeek; i++) {const day = prevMonthLastDay - firstDayWeek + i + 1const date = new Date(year, month - 2, day)const dateStr = date.toDateString()row.push({day,date: dateStr,currentMonth: false,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})}// 填充当月日期for (let day = 1; day <= lastDay.getDate(); day++) {const date = new Date(year, month - 1, day)const dateStr = date.toDateString()row.push({day,date: dateStr,currentMonth: true,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})if (row.length === 7) {dateList.push(row)row = []}}// 填充下个月的日期let nextMonthDay = 1while (row.length < 7) {const date = new Date(year, month, nextMonthDay)const dateStr = date.toDateString()row.push({day: nextMonthDay++,date: dateStr,currentMonth: false,isToday: dateStr === currentDateStr,selected: selectedDateStr && dateStr === selectedDateStr})}if (row.length > 0) {dateList.push(row)}this.setData({dateList})},// 上个月prevMonth() {let {year,month} = this.dataif (month === 1) {year--month = 12} else {month--}this.setData({year,month}, () => {this.generateDateList()})},// 下个月nextMonth() {let {year,month} = this.dataif (month === 12) {year++month = 1} else {month++}this.setData({year,month}, () => {this.generateDateList()})}});

3. 实现效果图

在这里插入图片描述

4. 关于作者其它项目视频教程介绍

  1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  6. 为什么要封装BaseActivity?: https://www.bilibili.com/video/BV11S411A7R5/?vd_source=984bb03f768809c7d33f20179343d8c8
  7. 为什么要封装BaseFragment?：https://www.bilibili.com/video/BV1Um421G7yC/?vd_source=984bb03f768809c7d33f20179343d8c8
http://www.lryc.cn/news/527906.html

相关文章：

  • Vue 3 中的 toRef 与 toRefs：使用与案例解析
  • 问题修复记录：Linux docker 部署 dify，无法调用宿主机本地服务
  • 代码随想录day20
  • 【ProxyBroker】用Python打破网络限制的利器
  • 分布式微服务系统架构第88集：kafka集群
  • RocketMQ原理—5.高可用+高并发+高性能架构
  • 下载Visual Studio Community 2019
  • 一文简单回顾Java中的String、StringBuilder、StringBuffer
  • 27. C语言 强制类型转换详解
  • git困扰的问题
  • 反向代理模块。。
  • 【Linux基础指令】第三期
  • Jenkins安装部署（以及常见报错解决方案），jdk版本控制器sdkman
  • 利用JSON数据类型优化关系型数据库设计
  • Nxopen 直齿轮参数化设计
  • 线程配置经验
  • 火语言RPA--KimiAiFree服务
  • P6120 [USACO17JAN] Hoof, Paper, Scissor S
  • Android Studio打包APK
  • 08 比特币通用技术介绍
  • 拟合损失函数
  • 二进制安卓清单 binary AndroidManifest - XCTF apk 逆向-2
  • 在线免费快速无痕去除照片海报中的文字logo
  • 引领未来科技潮流：Web3 前沿发展趋势
  • 【番外篇】鸿蒙扫雷天纪：运混沌灵智勘破雷劫天局
  • 08.OSPF 特殊区域及其他特性
  • 人工智能在医疗领域的应用有哪些？
  • c#使用Confluent.Kafka实现生产者发送消息至kafka（远程连接kafka发送消息超时的解决 Local：Message timed out）
  • 【2025年数学建模美赛F题】（顶刊论文绘图）模型代码+论文
  • DeepSeek 的背景介绍