微信小程序日历组件
2018-03-26 21:08
363 查看
这个日历采用小程序组件化开发,有兴趣的同学可以引用本组件(怎么引用不多赘述,自行去微信小程序开发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;
}
-------------------------------------------------------------------------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;
}
相关文章推荐
- 微信小程序开发05-日历组件的实现
- 微信小程序日历组件calendar详解及实例
- 微信小程序日历组件开发
- 微信小程序日历组件开发
- 微信小程序------媒体组件(视频,音乐,图片)
- 微信小程序-基础内容组件
- 微信小程序下拉筛选菜单WXDropDownMenu组件
- 微信小程序把玩(十四)button组件
- 微信小程序制作组件
- 制作微信小程序组件
- 微信小程序精品组件:chartjs:饼图,折线图,bar,point-styles
- 微信小程序map、video、canvas地图组件添加覆盖物
- 【微信小程序】日历插件,适用于酒店订房类小程序
- 微信小程序 自定义二维picker组件(省市)
- 微信小程序实现image组件图片自适应宽度比例显示的方法
- 微信小程序picker组件下拉框选择input输入框的实例
- 004、微信小程序---组件模板
- 【微信小程序笔记-4】组件-基础内容(icon、text、progress)
- 第七篇、微信小程序-video组件