小程序日历控件分享

本贴最后更新于 2500 天前,其中的信息可能已经时移世改

之前小程序开发需要用到日历控件,但是关于小程序可用的实在资源有限,于是就自己写了一个,如今项目上线后将它分享出来,希望能帮到需要的人。
效果图:

JS 代码:

dateData: function () { let dataAll = []//总日历数据 let dataAll2 = []//总日历数据 let dataMonth = []//月日历数据 let date = new Date//当前日期 let year = date.getFullYear()//当前年 let week = date.getDay();//当天星期几 let weeks=[] let month = date.getMonth() + 1//当前月份 let day = date.getDate()//当天 let daysCount = 100//一共显示多少天 let dayscNow = 0//计数器 let monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]//月份列表 let nowMonthList=[]//本年剩余年份 for (let i = month;i<13;i++){ nowMonthList.push(i) } let yearList = [year]//年份最大可能 for (let i = 0; i < daysCount/365+2;i++){ yearList.push(year+i+1) } let leapYear = function (Year) {//判断是否闰年 if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) { return (true); } else { return (false); } } for (let i = 0; i < yearList.length;i++){//遍历年 let mList if (yearList[i] == year){//判断当前年份 mList = nowMonthList }else{ mList = monthList } for (let j = 0; j < mList.length;j++){//循环月份 dataMonth=[] let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] let t_days_thisYear=[] if (yearList[i] == year){ for (let m = 0; m<nowMonthList.length;m++){ t_days_thisYear.push(t_days[mList[m]-1]) } t_days = t_days_thisYear } else { t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] } for (let k = 0; k < t_days[j];k++){//循环每天 dayscNow++ let nowData if (dayscNow < daysCount) {//如果计数器没满 let days = k + 1 if (days < 10) { days = "0" + days } if (yearList[i] == year && mList[j] == month){//判断当年当月 if (k + 1 >= day) { nowData = { year: yearList[i], month: mList[j], day: k + 1, date: yearList[i] + "" + mList[j] + days, selected: 0, re: yearList[i] + "-" + mList[j] + "-" + days, } dataMonth.push(nowData) if (k+1 == day) { let date = new Date(yearList[i] + "-" + mList[j] + "-" + (k + 1)) let weekss = date.getDay()//获取每个月第一天是周几 weeks.push(weekss) } } } else {//其他情况 nowData = {//组装自己需要的数据 year: yearList[i], month: mList[j], day: k + 1, date: yearList[i] + "" + mList[j] + days, selected: 0, re: yearList[i] + "-" + mList[j] + "-" + days, } dataMonth.push(nowData) if (k == 0) { let date = new Date(yearList[i] + "-" + mList[j] + "-" + k + 1) let weekss = date.getDay()//获取每个月第一天是周几 weeks.push(weekss) } } }else{ break } } dataAll.push(dataMonth) } } for (let i = 0; i < dataAll.length;i++){ if (dataAll[i].length!=0){ dataAll2.push(dataAll[i]); } } this.setData({ date: dataAll2, weeks: weeks }) },

以上代码主要功能是作为数据源渲染
wxml 代码:

<view class="headbox2"> <view class="headdate">日</view> <view class="headdate">一</view> <view class="headdate">二</view> <view class="headdate">三</view> <view class="headdate">四</view> <view class="headdate">五</view> <view class="headdate">六</view> </view> <view class="headbox"> <view class="headdate">日</view> <view class="headdate">一</view> <view class="headdate">二</view> <view class="headdate">三</view> <view class="headdate">四</view> <view class="headdate">五</view> <view class="headdate">六</view> </view> <view class="mouth" wx:for="{{date}}" wx:for-item="date" wx:for-index="index"> <view class="mouthhead">{{date[index].year}}年{{date[index].month}}月</view> <view class="daybox"> <view class="day" wx:if="{{weeks[index]>0}}"></view> <view class="day" wx:if="{{weeks[index]>1}}"></view> <view class="day" wx:if="{{weeks[index]>2}}"></view> <view class="day" wx:if="{{weeks[index]>3}}"></view> <view class="day" wx:if="{{weeks[index]>4}}"></view> <view class="day" wx:if="{{weeks[index]>5}}"></view> <view class="day {{item.selected == 1 ? 'bc':''}}" wx:for="{{date}}" wx:for-index="idx" data-index="{{index}}" data-indexs="{{idx}}" bindtap="selectday"> <view class="actname {{item.selected == 1 ? 'bc2':''}}">{{date[idx].act.subject}}</view> {{date[idx].day}} <view class="actname2 {{item.selected == 1 ? 'bc2':''}}" wx:if="{{date[idx].act.rate}}">{{date[idx].act.rate/10}}折</view> </view> </view> </view> <view class="none88" wx:if="{{pagetype=='day'}}"></view> <view class="fixedbtn" bindtap="submitbtn" wx:if="{{pagetype=='day'}}">确认选择</view>

将数据渲染至 wxml

wxss 样式代码:

.headdate{ height: 30px; background-color: white; flex:1; text-align: center; line-height: 30px; } .headbox{ display: flex; display: -webkit-flex; border-bottom: 1px solid #e5e5e5; } .headbox2{ display: flex; position: fixed; width: 750rpx; display: -webkit-flex; border-bottom: 1px solid #e5e5e5; background-color: white; z-index: 2; } .mouthhead{ height: 88rpx; background-color: #f4f4f4; width: 750rpx; line-height: 88rpx; text-align: center; } .mouth{ /* background-color: white; */ /* padding-top: 10rpx; padding-bottom: 10rpx; */ } .daybox{ background-color: white; padding-top: 10rpx; padding-bottom: 10rpx; } .day{ width: 107rpx; height: 107rpx; line-height: 107rpx; text-align: center; display: inline-block; position: relative; top: 0; margin-top: -10rpx; overflow: hidden; color: #353535; font-size: 34rpx; } .day2{ color: #04babe; width: 107rpx; height: 107rpx; line-height: 107rpx; text-align: center; display: inline-block; position: relative; bottom: 0; margin-top: 0; } .actname{ color: #04babe; position: absolute; font-size: 20rpx; top: -30rpx; width: 107rpx; text-align: center; } .actname2{ color: #04babe; position: absolute; font-size: 20rpx; bottom: -30rpx; width: 107rpx; text-align: center; } .bc{ background-color: #04babe; color: white!important; } .bc2{ color: white!important; } .none88{ height: 88rpx; width: 750rpx; }
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3455 回帖 • 149 关注
  • 技术

    到底什么才是技术呢?

    88 引用 • 179 回帖 • 4 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖 • 2 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 410 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 394 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    346 引用 • 757 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1021 回帖
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 280 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    134 引用 • 1127 回帖 • 108 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 655 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • OnlyOffice
    4 引用 • 18 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    93 引用 • 122 回帖 • 616 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖 • 3 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 739 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 444 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    172 引用 • 1538 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 31 回帖 • 2 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 169 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 104 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 446 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖