微信小程序日历课表

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

 

 

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类ResourceBundle和MessageFormat提供了一个很好的工具集&#xff0c;用于解决Java应用程序内部的本地化消息。 这篇文章提供了一个小示例&#xff0c;说明如何使用ChoiceFormat将与消息相关的简单条件从Java代码移动到消息文件中。 如果您已经知道ChoiceFormat我认为您不会…

【LuoguP3241】[HNOI2015] 开店

题目链接 题意 给出一棵边带权的树&#xff0c;多次在线询问一个点到一个区间内的点的距离和。 Sol 分块过不了的 一个 trick &#xff0c;都知道要算两点之间距离可以拆成到根的距离和他们的 LCA 到根的距离 &#xff0c;其实要算多个点到一个点距离也可以使用一个类似的 tric…

windows中的项目拷贝到linux中,部分数据不显示的原因

linux严格区分大小写&#xff0c;可能是数据表名大小写导致的。 如上传文件不成功&#xff0c;可能是系统权限导致的。转载于:https://www.cnblogs.com/miaoxingren/p/9784743.html

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

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

调用天气预报接口

方案一&#xff1a; 浏览器由于安全的限制&#xff0c;不允许跨域访问。但是PHP服务器是允许的。我们可以通过使用PHP文件做代理&#xff0c;通过PHP来调用接口。 详细接口分析可参看&#xff1a;http://www.cnblogs.com/wangjingblogs/p/3192953.html 返回JSON格式 PHP代码…

测试集准确率不变_这个医疗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…

PHP涉及的所有英文单词

PHP涉及的所有英文单词拦路虎 PHP再火&#xff0c;也会让一部同学心生畏惧&#xff0c;因为看到编辑器中那一串串英文单词&#xff0c;担心自己英文不好&#xff0c;从而对能学会PHP的决心产生动摇。其实大可不必&#xff0c;英文在学习PHP过程中真的连级别都够不上&#xff0c…

java 不编译咋办_java – 为什么JVM不编译整个程序,而不是逐个编译?

他所说的是,在运行时将所有字节码编译成机器语言是不切实际的.您可以预先编译所有内容,但这并不是JIT所采用的方法.一方面,不知道程序有多大.人们在30分钟的启动时会相当不高兴,因为它编译了可以找到的每个库(给定的Java程序不在一个文件中,它可以访问类路径中的所有内容)对于另…

mysql .pdb是什么文件_计算广告算法到底要做什么?

这个话题在这个专栏开篇就该去讲。恰逢今天公司业务和财务培训(20190216)之后&#xff0c;也有一些思索&#xff0c;索性就都汇总写下来。本文杂述&#xff0c;不尽完备&#xff0c;但是值得不断完善。我喜欢一句话“革命不是请客吃饭&#xff0c;不是做文章&#xff0c;不是绘…

浅析inline-block--使用inline-block创建布局

inline-block前端程序猿们肯定不陌生&#xff0c;它是display属性的一个取值。 之所以称之为inline-block。是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征。 块级元素&#xff08;block elements&#xff09;,来源于CSS盒子模型。块级元素包含width h…

Cookie和Session版的登录验证

URL : from django.conf.urls import url from app01 import viewsurlpatterns [url(r^login/, views.login),url(r^home/, views.home),url(r^index/, views.index), ] 前端 : <form action"" method"post">{% csrf_token %}<input type"t…

Java 8 Friday Goodies:java.io终于成功了!

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 我们已经写了一些关于Java 8好东西的博客 &#xff0c;现在我们觉得是时候开始一个新的博客系列了…

ASP.NET获取客户端、服务器端基础信息

1. 在ASP.NET中专用属性&#xff1a;获取服务器电脑名&#xff1a;Page.Server.ManchineName获取用户信息&#xff1a;Page.User获取客户端电脑名&#xff1a;Page.Request.UserHostName获取客户端电脑IP&#xff1a;Page.Request.UserHostAddress2. 在网络编程中的通用方法&am…

java json decode 中文_关于json_decode乱码及NULL的解决方法

写接口的同学应该会经常遇到数据格式的转换&#xff0c;这时候必不可少的两个函数就是json_encode()和json_decode()。这两个函数使用的时候有很多的主要事项&#xff0c;在这里我来说一下json_decode()。json_decode():对JSON 格式的字符串进行解码,接受一个JSON 格式的字符串…

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…

代码片段 欢迎补充 一起共享

python&#xff1a; https://github.com/Lj-github/pythonTool转载于:https://www.cnblogs.com/liujiang04/p/9787486.html