微信小程序简单实现第二天开始一周日期,显示为周几及当天号数,点击星期可切换日期,下方显示当前选择日期,以便其他函数调用;
效果截图:
WXML代码:
<view class="choose-time-middle">
<view class="date">
<view wx:for="{{dateArray}}" wx:key="index"><button class="{{item.day == thisDate ? 'active' : ''}}" data-id="{{item.day}}" bindtap="dateClick" data-time="{{item.time}}">{{item.week}}</button></view>
<text class="clearfix"></text>
</view>
<view class="date">
<view wx:for="{{dateArray}}" wx:key="index">{{item.day}}</view>
<text class="clearfix"></text>
</view>
</view>
<view class="show-date">
<text>当前时间:{{nowDate}}</text>
</view>
WXSS代码:
.choose-time-middle{
width: 100%;
height: 120rpx;
padding: 10rpx 0 20rpx 0;
background-color: #fff;
}
.date view{
float: left;
width: 14%;
padding-top: 10rpx;
text-align: center;
}
.date view button{
padding: 0;
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
background-color: #fff;
border-radius: 50%;
}
.date view button.active{
background-color: #009ee6;
color: #fff;
}
.date view button::after{
border: none;
}
.show-date{
width: 100%;
text-align: center;
padding: 50rpx 0rpx;
}
JS代码:
Page({
/**
* 页面的初始数据
*/
data: {
thisDate: '', //日期选中
nowDate: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getWeekDay();
},
/**
* 号数补零
*/
paddingZero: function (n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
},
/**
* 获取明日开始一周日期
*/
getWeekDay: function () {
let that = this;
let myDate = new Date();
let year = myDate.getFullYear();
let month = myDate.getMonth() + 1;
let dates = myDate.getDate();
let week = ['日', '一', '二', '三', '四', '五', '六'];
myDate.setDate(myDate.getDate() + 1);
let dateTemp;
let timeArr = [];
let times;
for (let i = 0; i < 7; i++) {
times = year + '-' + that.paddingZero((myDate.getMonth() + 1)) + "-" + that.paddingZero(myDate.getDate());
dateTemp = myDate.getDate();
timeArr.push({ 'week': week[myDate.getDay()], 'day': dateTemp, 'time': times });
myDate.setDate(myDate.getDate() + 1);
}
that.setData({
dateArray: timeArr,
thisDate: timeArr[0].day,
nowDate: times
});
},
/*
* 日期选择
*/
dateClick: function (options) {
let _this = this;
let dateId = options.currentTarget.dataset.id;
let times = options.currentTarget.dataset.time;
_this.setData({
thisDate: dateId,
nowDate: times
});
}
})
JSON代码:
{
"navigationBarTitleText": "获取明天开始一周时间",
"disableSwipeBack": true
}