在小程序开发中,经常会遇到特殊日历的制作,下面开源一个在日常项目用到的日历demo.代码可直接复制,即可看到如下效果:
一、效果
二、代码部分
clener.js文件内容
// pages/services/servicesdetail/serdetails.ts
Page({
/**
* 页面的初始数据
*/
data: {
titleData: "",
services_tags: "服务介绍",
diseaseList: [
{ diseaseCode: "0", diseaseName: "08:00~10:00", checked: false },
{ diseaseCode: "1", diseaseName: "10:00~12:00", checked: false },
{ diseaseCode: "2", diseaseName: "14:00~15:30", checked: false },
{ diseaseCode: "3", diseaseName: "15:30~17:00", checked: false },
],
thisDate: 2, //日期选中
nowDate: '',
temp: '',
oneData: "#06c6ad",//日期隐藏显示标记
twoData: "#f0f0f0",
threeData: "#f0f0f0",
fourData: "#f0f0f0",
fiveData: "#f0f0f0",
sixData: "#f0f0f0",
sevenData: "#f0f0f0",
firstValue: "",//月份
twoValue: "",//月份
},
/**
* 时间选择切换
*/
diseaseSwitch: function (options) {
let that = this;
// 按钮索引
var index = options.currentTarget.dataset.index;
// 索引对应内容
var item = that.data.diseaseList[index];
for (var y in that.data.diseaseList) {
that.data.diseaseList[y].checked = false;
}
// 数据处理
let timeDate = new Date();
let d = timeDate.getDate();
let h = timeDate.getHours();
// let h=15;
let m = timeDate.getMinutes();
let timestampTwo = new Date(''+that.data.nowDate).getTime();//选中日期字符串转时间戳
let timeStamp = Date.parse(new Date()+"");//当前时间
if (timestampTwo-timeStamp> 0) {
// 选中,未选中状态切换
item.checked = !item.checked;
} else {
if (h < 10) {
// 选中,未选中状态切换
item.checked = !item.checked;
} else if (h >= 10 && h < 12) {
// 选中,未选中状态切换
if (index == 0) {
wx.showToast({
title: '无效时间段',
icon: 'error',
duration: 2000
})
return 0;
} else {
item.checked = !item.checked;
}
} else if (h < 15 || (16 > h && h >= 15 && m < 30)) {
if (index == 0 || index == 1) {
wx.showToast({
title: '无效时间段',
icon: 'error',
duration: 2000
})
return 0;
} else {
item.checked = !item.checked;
}
} else if (h < 17) {
if (index == 0 || index == 1 || index == 2) {
wx.showToast({
title: '无效时间段',
icon: 'error',
duration: 2000
})
return 0;
} else {
item.checked = !item.checked;
}
} else {
wx.showToast({
title: '无效时间段',
icon: 'error',
duration: 2000
})
return 0;
}
}
that.setData({
diseaseList: that.data.diseaseList
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
// s时间段数据处理
let timeDate = new Date();
let h = timeDate.getHours();
let m = timeDate.getMinutes();
if (h < 10) {
that.data.diseaseList[0].checked = true;
} else if (h >= 10 && h < 12) {
that.data.diseaseList[1].checked = true;
} else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {
that.data.diseaseList[2].checked = true;
} else if ((17 > h && h >= 15 && m >= 30) && h < 17) {
that.data.diseaseList[3].checked = true;
}
that.setData({
diseaseList: that.data.diseaseList
})
// 时间段处理
this.getWeekDay();
const tmp = this.data.temp;
this.setData({
nowDate: tmp
});
},
/*
* 日期选择监听
*/
dateClick: function (options) {
let _this = this;
let dateId = options.currentTarget.dataset.id;
let times = options.currentTarget.dataset.time;
let date = new Date();
if (dateId > date.getDate()) {
for (var y in _this.data.diseaseList) {
_this.data.diseaseList[y].checked = false;
}
// s时间段数据处理
_this.data.diseaseList[0].checked = true;
_this.setData({
thisDate: dateId,
nowDate: times,
diseaseList: _this.data.diseaseList
});
} else {
// s时间段数据处理
let timeDate = new Date();
let h = timeDate.getHours();
let m = timeDate.getMinutes();
for (var y in _this.data.diseaseList) {
_this.data.diseaseList[y].checked = false;
}
if (h < 10) {
_this.data.diseaseList[0].checked = true;
} else if (h >= 10 && h < 12) {
_this.data.diseaseList[1].checked = true;
} else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {
_this.data.diseaseList[2].checked = true;
} else if ((17 > h && h >= 15 && m >= 30) && h < 17) {
_this.data.diseaseList[3].checked = true;
}
_this.setData({
thisDate: dateId,
nowDate: times,
diseaseList: _this.data.diseaseList
});
// 时间段处理
}
var timestamp = new Date(''+times).getTime();//日期字符串转时间戳
console.log("=====okkookojjo===" + times+"==时间戳=="+timestamp);
},
// 月份处理
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()-5);//调试时间也可使用例如+1天或者+10几天
let dateTemp;
let timeArr = [];
let times;
var currentNum = 0;//数字Number标记月份切换
var lastNum = 0;//数字Number标记月份切换
for (let i = 0; i < 7; i++) {//月份标记处理
times = year + '-' + that.paddingZero((myDate.getMonth() + 1)) + "-" + that.paddingZero(myDate.getDate());
dateTemp = myDate.getDate();
currentNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));
if (i == 0) {
that.firstValue = times.substring(times.indexOf("-") + 1, times.lastIndexOf("-"));
that.setData({
firstValue: that.firstValue
})
}
if (i >= 1) {//月份显示标记
var s = currentNum - lastNum;
var result = currentNum + "";
if (s == 1 && i == 1) {
that.setData({
twoData: "#06c6ad",
twoValue: result
})
} else if (s == 1 && i == 2) {
that.setData({
threeData: "#06c6ad",
twoValue: result
})
} else if (s == 1 && i == 3) {
that.setData({
fourData: "#06c6ad",
twoValue: result
})
} else if (s == 1 && i == 4) {
that.setData({
fiveData: "#06c6ad",
twoValue: result
})
} else if (s == 1 && i == 5) {
that.setData({
sixData: "#06c6ad",
twoValue: result
})
} else if (s == 1 && i == 6) {
that.setData({
sevenData: "#06c6ad",
twoValue: result
})
}
}
lastNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));//数字
if (i == 0) {
that.data.temp = times;
timeArr.push({ 'week': '今天', 'day': dateTemp, 'time': times });
} else if (i == 1) {
timeArr.push({ 'week': '明天', 'day': dateTemp, 'time': times });
} else {
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
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
//转换为时间格式
formatDate(time) {
let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
var date = new Date(time);
date.setDate(date.getDate());
let weekDay = date.getDay();
var weekDate = show_day[weekDay]
var YY = date.getFullYear() + '-';
var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";
var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return YY + MM + DD + hh + mm + ss;
},
})
三、clener.wxss代码内容
/* pages/load/rili/clener.wxss */
/* 月份标记 */
.month_tag {
width: 100%;
height: 40rpx;
display: flex;
margin-top: 20rpx;
flex-direction: row;
align-items: flex-end;
}
.one {
width: 70rpx;
text-align: center;
font-size: 26rpx;
margin-left: 17rpx;
}
.two {
width: 70rpx;
text-align: center;
font-size: 26rpx;
margin-left: 18rpx;
}
/* 服务时间 */
.services_time {
background-color: #eeeeee;
margin-top: 30rpx;
border-radius: 20rpx;
margin-left: 60rpx;
margin-right: 60rpx;
display: flex;
flex-direction: column;
}
/* 时间段选择 */
.time_select {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 28rpx;
color: #434343;
font-weight: bold;
}
.timeselect {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 70rpx;
margin-left: 10rpx;
margin-right: 10rpx;
flex-wrap:wrap;
}
/* 时间段属性 */
#button_time {
width: 48%;
height: 60rpx;
border-radius: 10rpx;
text-align: left;
font-size: 24rpx;
background-color: rgba(255, 255, 255, 1);
border: 2rpx solid #caccce;
color: #666666;
padding: 0rpx 10rpx;
margin: 0rpx 5rpx 10rpx 0rpx;
display: flex;
align-items: center;
justify-content: center;
}
#button_time::after {
border: none
}
#button_time.active {
height: 60rpx;
background-color: #06c7ae;
color: #fff
}
/* 周日期 */
.week_select {
background-color: #f0f0f0;
}
.choose-time-middle {
width: 100%;
height: 120rpx;
padding: 0rpx 0 0rpx 0;
background-color: #f0f0f0;
}
.date view {
float: left;
width: 14%;
padding-top: 10rpx;
text-align: center;
}
/* 日期属性 */
.date view button {
padding: 0;
width: 70rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
background-color: #ffff;
border-radius: 10rpx;
}
/* 周属性 */
.week_data_num {
color: #d1c1c1;
font-size: 28rpx;
}
.date view button.active {
background-color: #06c7ae;
color: #fff;
}
.date view button::after {
border: none;
}
.show-date {
width: 100%;
text-align: center;
padding: 50rpx 0rpx;
}
四、clener.wxml代码内容
<!--pages/load/rili/clener.wxml-->
<!-- 预约时间选择 -->
<view class="services_time">
<view class="time_select">
时间选择
</view>
<!-- 月份标记 -->
<view class="month_tag">
<view class="one" style="color: {{oneData}}">{{firstValue}}月</view>
<view class="one" style="color: {{twoData}}">{{twoValue}}月</view>
<view class="one" style="color: {{threeData}}">{{twoValue}}月</view>
<view class="one" style="color: {{fourData}}">{{twoValue}}月</view>
<view class="two" style="color: {{fiveData}}">{{twoValue}}月</view>
<view class="two" style="color: {{sixData}}">{{twoValue}}月</view>
<view class="two" style="color: {{sevenData}}">{{twoValue}}月</view>
</view>
<view class="week_select">
<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.day}}</button>
</view>
<text class="clearfix"></text>
</view>
<view class="date">
<!-- 周日期 -->
<view class="week_data_num" wx:for="{{dateArray}}" wx:key="index">{{item.week}}</view>
<text class="clearfix"></text>
</view>
</view>
</view>
<!-- 时间段 -->
<view class="timeselect">
<button style="height: 70rpx;" id="button_time" wx:for="{{diseaseList}}" wx:key="*this" data-index="{{index}}" class="{{item.checked ? 'active' : ''}}" bindtap="diseaseSwitch">{{item.diseaseName}}</button>
</view>
<!-- 展示选中时间 -->
<view class="show-date" hidden="true">
<text>当前时间:{{nowDate}}</text>
</view>
</view>