微信小程序日历课表

最近项目中使用到了日历,在网上找了一些参考,自己改改,先看效果图

 

 

wxml

<view class="date"><image class="direction" src="/images/icon/left.png" bindtap='minusMouth'/><label>{{year}}年{{mouth}}月</label><image class="direction" src="/images/icon/right.png" bindtap='plusMouth' />
</view>
<view class="header"><block wx:for="{{weeks}}" wx:key="index"><text class="weeks-item-text">{{item}}</text></block>
</view><view class="body-days"><block wx:for="{{days}}" wx:key="index"><block wx:if="{{item !== nowDate }}"><view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block><block wx:else><view class="days-item days-item-selected" data-date='{{year}}-{{mouth}}-{{item}}' bindtap='selDate'><view class="days-item-text" wx:if="{{item>0}}">{{item}}</view></view></block></block>
</view>

wxss

.date {display: flex;flex-direction: row;justify-content: center;line-height: 3em;align-items: center;
}.direction {width: 40rpx;margin: 15rpx;height: 40rpx;
}.header {display: flex;flex-direction: row;background: #5DD79C;color: #fff
}.weeks-item-text {width: 100%;line-height: 2em;font-size: 40rpx;text-align: center;border-left: 1px solid #ececec;}.body-days {display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;
}.days-item {width: 14.285%;display: flex;justify-content: center;align-content: center;
}.days-item-text {width: 60rpx;padding: 26rpx;font-size: 26rpx;/* border-radius: 50%; */border: 1rpx solid #ececec;/* margin-top: 34rpx;margin-bottom: 34rpx; */color: #000;
}
/* 选中状态 */
.days-item-selected{background: #5DD79C
}

 

js

Page({/*** 页面的初始数据*/data: {date: [],weeks: ['日', '一', '二', '三', '四', '五', '六'],days: [],year: 0,mouth: 0,nowDate:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = thisthat.dateData();var myDate = new Date();//获取系统当前时间var nowDate = myDate.getDate();that.setData({nowDate:nowDate})console.log(nowDate)},// 点击日期事件selDate:function(e){let that = this// 日期 年月日var seldate = e.currentTarget.dataset.date//var selday = e.currentTarget.dataset.dayconsole.log(seldate)that.setData({nowDate: selday})},//用户点击减少月份minusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth--if (mouth < 1) {mouth = 12year--}this.updateDays(year, mouth)},//用户点击增加月份plusMouth: function () {var mouth;var year;mouth = this.data.mouthyear = this.data.yearmouth  if (mouth > 12) {mouth = 1year  }this.updateDays(year, mouth)},dateData: function () {var date = new Date();var days = [];var year = date.getFullYear();var mouth = date.getMonth()   1;this.updateDays(year, mouth)},updateDays: function (year, mouth) {var days = [];var dateDay, dateWeek;// 根据日期获取每个月有多少天var getDateDay = function (year, mouth) {return new Date(year, mouth, 0).getDate();}//根据日期获取这天是周几var getDateWeek = function (year, mouth) {return new Date(year, mouth - 1, 1).getDay();}dateDay = getDateDay(year, mouth)dateWeek = getDateWeek(year, mouth)// console.log(dateDay);// console.log(dateWeek);//向数组中添加天for (let index = 1; index <= dateDay; index  ) {days.push(index)}//向数组中添加,一号之前应该空出的空格for (let index = 1; index <= dateWeek; index  ) {days.unshift(0)}this.setData({days: days,year: year,mouth: mouth,})}
})

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java并发数据共享机制_Java并发编程:核心理论之数据共享性

原标题&#xff1a;Java并发编程&#xff1a;核心理论之数据共享性并发编程是Java程序员最重要的技能之一&#xff0c;也是最难掌握的一种技能。它要求编程者对计算机最底层的运作原理有深刻的理解&#xff0c;同时要求编程者逻辑清晰、思维缜密&#xff0c;这样才能写出高效、…

测试集准确率不变_这个医疗AI准确率突破天际,招来了铺天盖地的质疑

转自 | 量子位只要输入一次心跳的波谱。就能判断一个人有没有发生心力衰竭 (CHF) &#xff0c;准确率100%。这是英国华威大学领衔的团队&#xff0c;用机器学习方法做出的新成果。还登上了影响因子2.943的Biomedical Signal Processing and Control期刊。准确率眼看就要突破天际…

JavaFX自定义控件– Nest Thermostat第1部分

几周前&#xff0c;由于Hendrik Ebbers的出色文章 &#xff0c;我决定花一些时间观看有关JavaFX的JavaOne讨论。 我不得不说我已经学到了很多东西&#xff0c;只是看这些视频&#xff08;即使我还没有完成&#xff09;&#xff01; Gerrit的“使用力&#xff0c;路克”或使用J…

syslog可能引起得问题_牙齿经常有问题?可能是这4个坏习惯引起的,要改正

很多人明明很年轻&#xff0c;却得了很多牙齿疾病&#xff0c;甚至到了换牙的地步。牙齿虽然是最为坚硬的身体器官&#xff0c;但是即使再坚硬也是容易受到伤害的&#xff0c;日常生活中有很多小事都会造成对牙齿的伤害&#xff0c;想要保护牙齿&#xff0c;一定要改正一下这几…

jq实现前端文件上传

FormData FormData是XMLHttpRequest Level 2 新增的一个接口。 使用FormData可以实现各种文件上传。 使用 // 创建FormData的实例 var formdata new FormData();// 用append()为实例添加键和值 formdata.append(键名, 键值); 注意 使用jq的$.ajax()方法来进行文件上传时&am…

使用JUnitParams进行参数化的JUnit测试

参数化的单元测试用于在不同条件下测试相同的代码。 借助参数化的单元测试&#xff0c;我们可以建立一种测试方法&#xff0c;该方法从某些数据源中检索数据。 该数据源可以是测试数据对象&#xff0c;外部文件甚至数据库的集合。 一般的想法是使使用相同的单元测试方法测试不同…

js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域,让你的本地开发飞起来...

最近在接到一个需求是做一个可视化的监控系统&#xff0c;mock数据来开发的话实在不太方便&#xff0c;况且数据量之大。查了一下资料&#xff0c;可以用webpack-dev-server作为代理&#xff0c;直接请求线上&#xff0c;哈哈哈&#xff0c;是不是很方便。### 目前我用的是webp…

实现用户操作指引功能

主要是通过定位找到需要指引的目标元素&#xff0c;然后再在蒙版上画一个div&#xff0c;设置为白色&#xff0c;定位到目标元素位置。思路大概就是这样。 图一&#xff1a; ![](https://img2018.cnblogs.com/blog/1354858/201811/1354858-20181105141942044-1763163359.png) 图…

vue2.0 element-ui中的el-select选择器无法显示选中的内容

我使用的是element-ui V2.2.3。代码如下&#xff0c;当我选择值得时候&#xff0c;el-select选择器无法显示选中的内容&#xff0c;但是能触发change方法&#xff0c;并且能输出选择的值。 select.vue文件 <template><div><div class"row" v-for&quo…

Gradle接口:Gradle构建元数据

正如我之前在“ 识别Gradle约定 ”和“ 从Ant Build演变Gradle构建&#xff1a;导入Ant构建文件 ”之类的文章中所显示的那样&#xff0c;可以通过Groovy访问Gradle的API来收集有关Gradle构建的重要信息。 在本文中&#xff0c;我演示了如何通过Gradle接口访问基本的Gradle构建…

php 工资 2018,佛山市2018年平均工资(社平工资)

2018年佛山市城镇非私营单位就业人员年平均工资为79824元(折合月平均工资6652)。2018年佛山市在岗职工年平均工资为80288元(折合月平均工资6691&#xff0c;四舍五入)。2018年佛山市城镇私营单位就业人员年平均工资为57297元(折合月平均工资4775)。广东地区2019年7月1日起市平均…

oj运行时错误如何查找原因_VLOOKUP又失灵?避免这四种错误类型

说起函数&#xff0c;你第一个想到什么&#xff1f;那绝对是表界曝光率最高的函数——VLOOKUP 了&#xff01;什么&#xff0c;你还不知道 VLOOKUP&#xff1f;那今天这篇文章&#xff0c;你可千万不能错过&#xff01;&#xff01;根据编号匹配姓名&#xff1b;根据评分匹配等…

Table Dragger - 简单的 JS 拖放排序表格插件

Table Dragger 是一个极简的实现拖放排序的表格插件&#xff0c;纯 JavaScript 库&#xff0c;不依赖 jQuery。用于构建操作方便的拖放排序功能&#xff0c;超级容易设置&#xff0c;有平滑的动画&#xff0c;支持触摸事件。 在线演示 免费下载 您可能感兴趣的相关文章网…

[Swift]遍历集合类型(数组、集合和字典)

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号&#xff1a;山青咏芝&#xff08;shanqingyongzhi&#xff09;➤博客园地址&#xff1a;山青咏芝&#xff08;https://www.cnblogs.com/strengthen/ &#xff09;➤GitHub地址&…

沣东新城镐京遗址规划_沣东新城房价为啥这么高?

沣东房价为啥2万&#xff0c;为啥超越曲江浐灞&#xff0c;为啥和高新差不多&#xff1f;很多论坛 账号 抖音 喋喋不休&#xff0c;那么说说到底为啥这么贵1、从2018年开始&#xff0c;沣东新城商品房住宅用地&#xff0c;几乎容积率都在2.8以上&#xff0c;90%以上容积率在2.5…

在一台机器上运行多个ActiveMQ实例

几周前&#xff0c;我通过Mule ESB解决方案再次开始使用Apache ActiveMQ作为JMS提供程序。 由于我使用ActiveMQ已经有几年了&#xff0c;所以我认为最好检查一些&#xff08;新&#xff09;功能&#xff0c;例如故障转移传输和其他群集功能 。 为了能够测试这些最后的东西&…

P3138 [USACO16FEB]负载平衡Load Balancing_Silver

https://www.luogu.org/problemnew/show/P3138 题目描述 农民约翰的N只牛分别站在他的二维农场的不同位置&#xff08;x1,y1&#xff09;…(xn,yn)&#xff08;1<N<100000,xi和yi是正整奇数&#xff09;。他想建一排无限长度的南北方向的满足等式xa的围栏来把他的农场分成…

saas物资管理界面设计_大型物流企业都在用的SaaS系统,看大规模运配网络如何实现精细化管理?...

企业发展到一定阶段&#xff0c;货品销售网络会不断扩大&#xff0c;就必须有大型高效的物流体系作为支撑&#xff0c;就需要大规模运配网络实现订单履约&#xff0c;物流企业的更大更多的商机也因此产生。由此可见&#xff0c;拥有大规模运配网络的主体有两类&#xff1a;第一…

socket read time out解决方法_time_after方法对jiffies回绕问题的解决

前言&#xff1a; 最近在啃《 Linux内核设计与实现》&#xff0c;看到第四章CFS时候&#xff0c;读了几遍没太理清这一小节到思路&#xff0c;看到40页这么一句话&#xff1a;“如果这里所讨论的定时器节拍对你来说很陌生&#xff0c;快先去看看第十一章再说。因为这点正是引入…

ASP.NET Core Razor Pages

Razor 页面是Asp.Net Core2.0新增的一个功能。Razor 页面是 ASP.NET Core MVC 的一个新特性&#xff0c;它可以使基于页面的编码方式更简单高效。 环境&#xff1a;vs2017 .net core2.2 Razor 页面项目搭建 目录说明 wwwroot&#xff1a;放置网站的静态文件的目录。例如/wwwroo…