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

浩宇软件开发2025-01-23 16:03

文章目录

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

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

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

2. 代码实现过程

  1. 编写calendar.wxml布局
xml 复制代码 
<!-- 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样式
css 复制代码 
/* 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具体逻辑实现
javascript 复制代码 
// 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.data
    const 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 + 1
      const 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 = 1
    while (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.data
    const 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 + 1
      const 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 = 1
    while (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.data
    if (month === 1) {
      year--
      month = 12
    } else {
      month--
    }
    this.setData({
      year,
      month
    }, () => {
      this.generateDateList()
    })
  },

  // 下个月
  nextMonth() {
    let {
      year,
      month
    } = this.data
    if (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
相关推荐
HappyAcmen7 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇7 小时前
微信小程序修改个人信息头像（uniapp开发）
微信小程序·小程序·uni-app
lvbb668 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪10 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北15 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
黑云压城After15 小时前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
黑云压城After16 小时前
小程序(物流、快递)，接入GPS北斗获取路线以及当前车辆位置
小程序
万岳科技程序员小金17 小时前
互联网医院系统源码解析：如何开发智能化的电子处方小程序？
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app
Java Fans18 小时前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
Evaporator Core21 小时前
微信小程序数据绑定与事件处理：打造动态交互体验
微信小程序·小程序·交互
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed