小程序日历控件分享

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

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

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 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 223 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 736 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖
  • 互联网

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

    98 引用 • 367 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3203 引用 • 8217 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 612 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 93 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 648 关注
  • V2Ray
    1 引用 • 15 回帖 • 5 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 2 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 390 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 619 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 158 回帖 • 1 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 46 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 36 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10270 引用 • 46680 回帖 • 62 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 2 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 38 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 569 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    186 引用 • 3908 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 558 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 125 关注