微信小程序項目,遇到這麼個需求。效果圖如下:
每頁顯示4個周的日期,可點擊日期時間段,也可點擊左右箭頭圖標進行日期翻頁,這一塊其實就是推算日期,把每個周的起始時間和結束時間推算出來,並正確顯示出來就行了。默認(未進行左右翻頁)第一個周的起始時間爲當前時間即可。
var self;
var day = 0;
var page = 0;
var weekArr = [];
Page({
/**
* 頁面的初始數據
*/
data: {
arr: [],
clickIndex: 0,
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
self = this;
self.getWeekArr(day);
},
/**
* 點擊日期
*/
clickItem(e) {
self.setData({
clickIndex: e.currentTarget.dataset.index,
});
console.log(e.currentTarget.dataset.week_start + '-' + e.currentTarget.dataset.week_end);
},
/**
* 後退
*/
left() {
page--;
day = page * 28;
self.getWeekArr(day);
},
/**
* 前進
*/
right() {
page++;
day = page * 28;
self.getWeekArr(day);
},
/**
* 獲取週數據
*/
getWeekArr(day) {
weekArr.splice(0, weekArr.length);
for (var i = 0; i < 4; i++) {
var week = {
'week_start': self.getDay(day),
'week_end': self.getDay(day + 6),
};
weekArr.push(week);
day += 7;
}
self.setData({
arr: weekArr,
clickIndex: 0,
});
console.log(self.data.arr);
var week = self.data.arr[0];
console.log(week.week_start + '-' + week.week_end);
},
/**
* 計算日期
*/
getDay(day){
var date = new Date();
var milliseconds = date.getTime() + 1000 * 60 * 60 * 24 * day;
date.setTime(milliseconds);
var month = date.getMonth() + 1;
var day = date.getDate();
return month + "." + day;
},
})
<view class='container'>
<image src='../image/zuojiantou.png' class='arrow' bindtap='left'></image>
<view class='date_container'>
<view class="item {{clickIndex==index?'active':''}}" wx:for='{{arr}}' wx:key='{{item}}'
bindtap='clickItem' data-index='{{index}}' data-week_start='{{item.week_start}}' data-week_end='{{item.week_end}}'>
{{item.week_start}}-{{item.week_end}}
</view>
</view>
<image src='../image/youjiantou.png' class='arrow' bindtap='right'></image>
</view>
.container {
display: flex;
height: 200rpx;
align-content: center;
align-items: center;
}
.arrow {
width: 70rpx;
height: 70rpx;
}
.date_container {
flex: 1;
display: flex;
align-items: center;
}
.item {
width: 150rpx;
height: 150rpx;
font-size: 26rpx;
background-color: #f00;
text-align: center;
color: white;
line-height: 150rpx;
border-radius: 50%;
margin-left: 10rpx;
}
.active {
width: 160rpx;
height: 160rpx;
background-color: blue;
line-height: 160rpx;
}
——————————————————————————————————————————————————————————
還有一種是日曆效果,效果圖如下:
具體樣式跟調整css來自定義。這裏我是以彈窗的形式展示的。
<button type='primary' bindtap='showCalendar'>展示日曆</button>
<view class='mask' hidden='{{show_calendar}}' bindtap='closeCalendar' catchtouchmove='true'></view>
<view hidden='{{show_calendar}}' class='dialog'>
<view class="calendar">
<view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
<image src='../image/arrow_left.png' class='arrow'></image>
</view>
<view class="centerView">{{cur_year}} 年 {{cur_month}} 月</view>
<view class="rightBgView" bindtap="handleCalendar" data-handle="next">
<image src='../image/arrow_right.png' class='arrow'></image>
</view>
</view>
<view class="weekBgView">
<view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}">{{item}}</view>
</view>
<view class="dateBgView">
<view class='emptyView' wx:if="{{hasEmptyGrid}}" wx:for="{{empytGrids}}" wx:key="{{index}}"></view>
<view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
<view>
<view class="datesView {{index==todayIndex?'dateSelectView':''}}">{{item.day}}</view>
<view class='red_point_container'>
<view wx:if='{{item.haveMeeting}}' class='red_point'></view>
</view>
</view>
</view>
</view>
</view>
.dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
}
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
}
.calendar {
height: 80rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.leftBgView {
width: 80rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 40rpx;
height: 40rpx;
}
.centerView {
width: 50%;
height: 80rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.rightBgView {
width: 80rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
}
.weekBgView {
height: 50rpx;
display: flex;
align-items: center;
}
.weekView {
width: 14.2857%;
text-align: center;
font-size: 28rpx;
}
.dateBgView {
display: flex;
flex-wrap: wrap;
}
.emptyView {
width: 14.2857%;
}
.dateView {
width: 14.2857%;
height: 80rpx;
display: flex;
justify-content: center;
}
.datesView {
height: 56rpx;
line-height: 56rpx;
text-align: center;
font-size: 26rpx;
display: flex;
justify-content: center;
}
.dateSelectView {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
line-height: 56rpx;
color: white;
text-align: center;
background-color: green;
}
.red_point_container {
width: 100%;
display: flex;
justify-content: center;
}
.red_point {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: red;
}
var arr = [];
var self;
Page({
data: {
hasEmptyGrid: false,
cur_year: '',
cur_month: '',
show_calendar: true,
},
onLoad(options) {
self = this;
//1、2、25號添加圓點兒標識
arr.push(1);
arr.push(2);
arr.push(25);
self.setNowDate();
},
dateSelectAction(e) {
var cur_day = e.currentTarget.dataset.idx;
this.setData({
todayIndex: cur_day,
show_calendar: true,
})
console.log(`點擊的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
},
setNowDate() {
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const todayIndex = date.getDate() - 1;
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
this.calculateEmptyGrids(cur_year, cur_month);
this.calculateDays(cur_year, cur_month);
this.setData({
cur_year: cur_year,
cur_month: cur_month,
weeks_ch,
todayIndex,
})
},
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
calculateEmptyGrids(year, month) {
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
empytGrids.push(i);
}
this.setData({
hasEmptyGrid: true,
empytGrids
});
} else {
this.setData({
hasEmptyGrid: false,
empytGrids: []
});
}
},
calculateDays(year, month) {
let days = [];
const thisMonthDays = this.getThisMonthDays(year, month);
for (let i = 1; i <= thisMonthDays; i++) {
days.push({
day: i,
haveMeeting: arr.indexOf(i) != -1,
});
}
this.setData({
days
});
},
handleCalendar(e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === 'prev') {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
}
},
/**
* 顯示日曆
*/
showCalendar() {
self.setData({
show_calendar: false,
});
},
/**
* 關閉日曆
*/
closeCalendar() {
self.setData({
show_calendar: true,
});
}
})