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

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

文章目录

    • 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

相关文章:

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

文章目录 1. 创建日历组件实现步骤&#xff1a;2. 代码实现过程3. 实现效果图4. 关于作者其它项目视频教程介绍 1. 创建日历组件实现步骤&#xff1a; 创建日历组件&#xff1a;首先&#xff0c;你需要创建一个日历组件&#xff0c;包含显示日期的逻辑。样式设计&#xff1a;为…...

Vue 3 中的 toRef 与 toRefs:使用与案例解析

在 Vue 3 的响应式系统中&#xff0c;toRef 和 toRefs 是两个非常实用的工具函数。它们主要用于将响应式对象的属性转换为单独的 ref&#xff0c;以便在模板或逻辑中更方便地使用。本文将详细介绍 toRef 和 toRefs 的用法&#xff0c;并通过一个老师信息的案例来演示它们的实际…...

问题修复记录:Linux docker 部署 dify,无法调用宿主机本地服务

重磅推荐专栏: 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域,包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用,以及与之相关的人工智能生成内容(AIGC)技术。通过深入的技术解析和实践经…...

代码随想录day20

235. 利用二叉搜索树的特性即可 /** lc appleetcode.cn id235 langcpp** [235] 二叉搜索树的最近公共祖先*/// lc codestart /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) :…...

【ProxyBroker】用Python打破网络限制的利器

ProxyBroker 1. 什么是ProxyBroker2. ProxyBroker的功能3. ProxyBroker的优势4. ProxyBroker的使用方法5. ProxyBroker的应用场景6.结语项目地址&#xff1a; 1. 什么是ProxyBroker ProxyBroker是一个开源工具&#xff0c;它可以异步地从多个来源找到公共代理&#xff0c;并同…...

分布式微服务系统架构第88集:kafka集群

使用集 群最大的好处是可以跨服务器进行负载均衡&#xff0c;再则就是可以使用复制功能来避免因单点故 障造成的数据丢失。在维护 Kafka 或底层系统时&#xff0c;使用集群可以确保为客户端提供高可用 性。 需要多少个broker 一个 Kafka 集群需要多少个 broker 取决于以下几个因…...

RocketMQ原理—5.高可用+高并发+高性能架构

大纲 1.RocketMQ的整体架构与运行流程 2.基于NameServer管理Broker集群的架构 3.Broker集群的主从复制架构 4.基于Topic和Queue实现的数据分片架构 5.Broker基于Pull模式的主从复制原理 6.Broker层面到底如何做到数据0丢失 7.数据0丢失与写入高并发的取舍 8.RocketMQ读…...

下载Visual Studio Community 2019

官方链接如下&#xff1a;Visual Studio Community 2019下载链接 https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/system-requirements#download 目前官方仅建议2022版&#xff0c;已经关闭vs2019等旧版本&#xff0c;哪天开放了&#xff0c;记得踢我一下。 …...

一文简单回顾Java中的String、StringBuilder、StringBuffer

简单说下String、StringBuilder、StringBuffer的区别 String、StringBuffer、StringBuilder在Java中都是用于处理字符串的&#xff0c;它们之间的区别是String是不可变的&#xff0c;平常开发用的最多&#xff0c;当遇到大量字符串连接的时候&#xff0c;就用StringBuilder&am…...

27. C语言 强制类型转换详解

本章目录: 前言强制类型转换&#xff08;Type Casting&#xff09;强制类型转换的语法示例1&#xff1a;将整数转换为浮点数输出结果&#xff1a; 代码解析&#xff1a; 整数提升&#xff08;Integer Promotion&#xff09;示例2&#xff1a;整数提升输出结果&#xff1a; 代码…...

git困扰的问题

.gitignore中添加的某个忽略文件并不生效 把某些目录或文件加入忽略规则&#xff0c;按照上述方法定义后发现并未生效&#xff0c; gitignore只能忽略那些原来没有被追踪的文件&#xff0c;如果某些文件已经被纳入了版本管理中&#xff0c;则修改.gitignore是无效的。 解决方…...

反向代理模块。。

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;将从服务器上得到的结果返回给客户端&#xff0c;此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说&#xff0c;反向代理就相当于…...

【Linux基础指令】第三期

近期更新的基础指令链接&#xff1a; 【Linux基础指令】第一期-CSDN博客 【Linux基础指令】第二期-CSDN博客 本期博客的主题依旧是 "基础指令" &#xff1b;话不多说&#xff0c;正文开始。 一、Linux的指令 1.zip / unzip 功能&#xff1a;打包压缩 命令格式&…...

Jenkins安装部署(以及常见报错解决方案),jdk版本控制器sdkman

目录 零、环境介绍 一、Jenkins安装 1、插件安装以及更换插件源 2、修改jenkins时区 二、sdkman安装&#xff08;可选&#xff09; 1、sdkman常用方法 2、sdkman常用方法演示 2.1、查看可用的jdk 2.2、下载jdk并切换版本 三、jenkins报错解决 1、下载sdkman后systemc…...

利用JSON数据类型优化关系型数据库设计

利用JSON数据类型优化关系型数据库设计 前言 在关系型数据库中&#xff0c;传统的结构化存储方式要求预先定义好所有的列及其数据类型。 然而&#xff0c;随着业务的发展&#xff0c;这种设计可能会显得不够灵活&#xff0c;尤其是在需要扩展单个列的描述功能时。 JSON数据…...

Nxopen 直齿轮参数化设计

NXUG1953 Visualstudio 2019 参考论文&#xff1a; A Method for Determining the AGMA Tooth Form Factor from Equations for the Generated Tooth Root Fillet //FullGear// Mandatory UF Includes #include <uf.h> #include <uf_object_types.h>// Internal I…...

线程配置经验

工作时&#xff0c;时常会遇到&#xff0c;线程相关的问题与解法&#xff0c;本人会持续对开发过程中遇到的关于线程相关的问题及解决记录更新记录在此篇博客中。 目录 一、线程基本知识 1. 线程和进程 二、问题与解法 1. 避免乘法级别数量线程并行 1&#xff09;使用线程池…...

火语言RPA--KimiAiFree服务

&#x1f6a9;【组件功能】&#xff1a;KimiAiFree服务支持联网搜索、支持智能体对话、支持长文档解读、支持图像OCR。 配置预览 配置说明 服务地址 支持T或# 自行搭建或第三方提供的KimiAiFree服务地址。 RefreshToken 支持T或# 与KimiAiFree服务交互时用到的token。从ki…...

P6120 [USACO17JAN] Hoof, Paper, Scissor S

难度&#xff1a;普及/提高−&#xff1b; 题意&#xff1a; ​ 石头、剪刀、布游戏&#xff0c;先给出 n n n 轮已经知道的其中一人的对局情况&#xff0c;例如样例&#xff1a; 5 P - 布 P - 布 H - 石头 P - 布 S - 剪刀另外一人&#xff0c;只允许修改一次机会的情况下…...

Android Studio打包APK

1.导出APK安装包 如果是首次打包&#xff0c;Create new 单击蓝色对话框右边文件夹&#x1f4c2;图标 &#xff0c;选择密钥保存路径&#xff0c;然后在下方File name对话框中填写您想要名称&#xff0c;再点击OK回到密钥创建对话框。 在此对话框中填写密码&#xff08;Passwo…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...

[特殊字符] Spring Boot底层原理深度解析与高级面试题精析

一、Spring Boot底层原理详解 Spring Boot的核心设计哲学是约定优于配置和自动装配&#xff0c;通过简化传统Spring应用的初始化和配置流程&#xff0c;显著提升开发效率。其底层原理可拆解为以下核心机制&#xff1a; 自动装配&#xff08;Auto-Configuration&#xff09; 核…...