普通的横向切换日历
极简横向切换日历.png
wxml
<view class="w100" id="date">
<view class="hDiv w100" id="dateTitle">
<text class="cancelText" bindtap="cancelDate">取消</text>
<text class="dateTitleText">日历</text>
<text class="confirmText" bindtap="confirmDate">确定</text>
</view>
<view class="year_month_day w100 hDiv">
<van-icon name="arrow-left" bindtap="lastMonth"/>
<text class="year_month_day_text">{{year}}年{{month}}月</text>
<van-icon name="arrow" bindtap="nextMonth"/>
</view>
<view class="week w100 hDiv">
<text
wx:for="{{weeks_ch}}"
wx:key="{{index}}"
class="commonWeekText"
>{{item}}</text>
</view>
<view class="divider"></view>
<view class="dateConten hDiv w100">
<!-- 占位的view -->
<view
class="nbspDateBox"
wx:for="{{nbspLength}}"
wx:key="{{index}}"
>
<text class="nbspDate commonDateText"></text>
</view>
<!-- 本月的日期渲染view -->
<view
class="realDateBox"
wx:for="{{allDay}}"
wx:key="{{index}}"
>
<text
class="realDateText commonDateText"
bindtap="chooseThisDay"
>{{index+1}}</text>
</view>
</view>
</view>
wxss
#date{
background: #fff;
padding:20rpx 0;
}
#dateTitle{
padding: 0 20rpx;
}
.cancelText{
font-size:30rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(46,96,208,1);
}
.confirmText{
font-size:30rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(46,96,208,1);
}
.dateTitleText{
flex: 1;
font-size:30rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(34,34,34,1);
text-align: center;
}
.year_month_day{
padding: 0 20rpx;
margin-top: 20rpx;
}
.year_month_day_text{
flex: 1;
text-align: center;
font-size:30rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(34,34,34,1);
}
.week{
margin-top: 20rpx;
}
.commonWeekText{
flex: 1;
font-size:26rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(34,34,34,1);
text-align: center;
}
.divider{
width: 100%;
height: 1px;
background: #eee;
margin-top: 20rpx;
}
.dateConten{
flex-wrap: wrap;
}
.realDateBox{
width: 14.2%;
height: 72rpx;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
}
.nbspDateBox{
width: 14.2%;
height: 72rpx;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
}
.commonDateText{
width: 72rpx;
text-align: center;
height: 72rpx;
line-height: 72rpx;
font-size:26rpx;
font-family:PingFang SC;
font-weight:500;
border-radius: 50%;
}
js
data:{
date: new Date(),
year:new Date().getFullYear(),
month: new Date().getMonth() + 1,
day: new Date().getDate(),
weeks_ch:['日', '一', '二', '三', '四', '五', '六'],
},
onReady() {
let year = this.data.year;
let month = this.data.month;
let day = this.data.day;
this.showday();
},
showday(){
//显示相应月份的天数
this.count();
let fistDate = new Date(this.data.year, this.data.month - 1, 1);
let xingqi = fistDate.getDay();
//渲染几个空白
this.setData({
nbspLength:xingqi,
})
//渲染有多少天出来
},
count(){
let month=this.data.month;
let allDay = this.data.allDay;
let year=this.data.year;
if (month != 2) {
if (month == 4 || month == 6 || month == 9 || month == 11){
//判断是否是相同天数的几个月，二月除外
this.setData({
allDay: 30
})
}else{
this.setData({
allDay: 31
})
}
}else{
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){
//判断是否是闰年，进行相应的改变
this.setData({
allDay: 29
})
}else{
this.setData({
allDay: 28
})
}
}
},
lastMonth(){
//上个月的操作逻辑
if (this.data.month>1) {
this.setData({
month: this.data.month-1
})
} else {
this.setData({
month: 12,
year: this.data.year-1,
})
}
this.showday();
},
nextMonth(){
//下个月的操作逻辑
if (this.data.month < 12) {
this.setData({
month: this.data.month+1
})
}else {
this.setData({
month:1,
year:this.data.year+1,
})
}
this.showday();
},
其中含有vant标签的均是使用的vant小程序框架
