微信小程序日历组件使用方法详解


Posted in Javascript onDecember 29, 2018

这个日历采用小程序组件化开发,有兴趣的同学可以引用本组件(怎么引用不多赘述,自行去微信小程序开发api了解)

wxml

<!--pages/components/calender.wxml-->
<view class='calender'>
<view class='operate'>
<text catchtap='reduce'>减少</text>
<text catchtap="add">增加</text>
</view>
<view class='year'>
<text>{{year}}年</text>
<text>{{currentMonth}}月</text>
</view>
<view class='week'>
<block wx:for="{{weekArr}}" wx:key="{{index}}">
<text>{{item}}</text>
</block>
</view>
<view class='date'>
<block wx:for="{{dateArr}}" wx:key="{{index}}">
<text>{{item-(weekNum-1)<=0?"":item-(weekNum-1)>yearMonth[currentMonth-1]?"":item-(weekNum-1)}}</text>
</block>
</view>
</view>

js

// pages/components/calender.js
Component({
data:{
weekArr:["日","一","二","三","四","五","六"],
yearMonth:[],
rowNum:"",
dateArr:[],
currentMonth:"",
year:"",
weekNum:""
},
created:function(){},
attached:function(){
let T = new Date()
this.setData({
currentMonth: T.getMonth() + 1,
year: T.getFullYear()
})
//判断闰年
let yeartype = (this.data.year % 4 == 0) && (this.data.year % 100 != 0 || this.data.year % 400 == 0)
if ( yeartype ){
this.setData({
yearMonth: [31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}else{
this.setData({
yearMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth +"-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth] + new Date(currentMonthDay).getDay())/7)
})
for( let i=0 ; i<this.data.rowNum ; i++ ){
for( let j = 0 ; j<7 ; j++ ){
this.data.dateArr.push(i*7+j)
}
}
this.setData({
dateArr:this.data.dateArr
})
},
methods:{
//获取下一个月份
add:function(){
this.triggerEvent("addone")
this.setData({
dateArr: []
})
if (this.data.currentMonth==12 ){
this.setData({
currentMonth: 1,
year:this.data.year+1
})
}else{
this.setData({
currentMonth: this.data.currentMonth + 1
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < this.data.rowNum; i++) {
for (let j = 0; j < 7; j++) {
this.data.dateArr.push(i * 7 + j)
}
}
this.setData({
dateArr: this.data.dateArr
})
},
//获取上一个月份
reduce:function(){
this.triggerEvent("reduceone")
this.setData({
dateArr:[]
})
if (this.data.currentMonth == 1) {
this.setData({
currentMonth: 12,
year: this.data.year - 1
})
} else {
this.setData({
currentMonth: this.data.currentMonth - 1
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < this.data.rowNum; i++) {
for (let j = 0; j < 7; j++) {
this.data.dateArr.push(i * 7 + j)
}
}
this.setData({
dateArr: this.data.dateArr
})
console.log(this.data.dateArr)
}
}
})

wxss

/* pages/components/calender.wxss */
.operate{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 32rpx;
color:#000;
padding-bottom: 40rpx;
}
.year{
padding:0 30%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size:32rpx;
color:#404040;
margin-bottom: 40rpx;
}
.calender{
display: flex;
flex-direction: column;
padding:0 4.5%;
width:91%;
border-top:1rpx solid #eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender .week{
display: flex;
flex-direction: row;
}
.calender .week text{
width:14%;
text-align: center;
font-size:26rpx;
}
.calender .date text{
width:14%;
display: inline-block;
text-align: center;
font-size:26rpx;
color:#000;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jQuery的position()方法详解
Jul 19 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
微信小程序自定义可滑动日历界面
Dec 28 #Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 #Javascript
微信小程序实现复选框效果
Dec 28 #Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
srcElement表格样式
2006/09/03 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
如何在python字符串中输入纯粹的{}
2018/08/22 Python
实例介绍Python中整型
2019/02/11 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
美德少年事迹材料
2014/01/23 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
一分钟演讲稿
2014/04/30 职场文书
考察现实表现材料
2014/05/19 职场文书
工地安全质量标语
2014/06/07 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
现场施工员岗位职责
2015/04/11 职场文书
导游词之太原天龙山
2020/01/02 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript