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


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 typeof 用法
Dec 28 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python编程求质数实例代码
2018/01/31 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
2014年医院工作总结
2014/11/20 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python