資訊專欄INFORMATION COLUMN
摘要：一前言最近公司要做一個(gè)酒店入住的小程序，不可避免的一定會(huì)使用到日歷，而小程序沒(méi)有內(nèi)置的日歷組件。二代碼原理分析寫(xiě)一個(gè)日歷只需要知道兩件事情一個(gè)月有多少天每個(gè)月的第一天是星期幾。
一、前言
最近公司要做一個(gè)酒店入住的小程序，不可避免的一定會(huì)使用到日歷，而小程序沒(méi)有內(nèi)置的日歷組件。在網(wǎng)上看了一下也沒(méi)有非常適合需求的日歷，于是自己寫(xiě)了一個(gè)。
二、代碼 1. 原理分析寫(xiě)一個(gè)日歷只需要知道兩件事情：
一個(gè)月有多少天；
每個(gè)月的第一天是星期幾。
2. 功能分析由于是酒店入住的日歷，所以需要實(shí)現(xiàn)如下功能：
渲染日歷，一般是從本月開(kāi)始，到半年之后的日歷
過(guò)去的日期不可選
實(shí)現(xiàn)點(diǎn)擊獲取入住日期、退房日期，以及改變相應(yīng)日期的顏色和整個(gè)時(shí)間段的顏色
3. 數(shù)據(jù)分析根據(jù)最后的功能實(shí)現(xiàn)，我生成的每個(gè)月的數(shù)據(jù)結(jié)構(gòu)如下：
{
year: 2018,
month: 3,
fullMonth: "03",
allDays:[
{
day: 1,
fullDay: "01",
fullDate: "2018-03-01"
},
{
day: 2,
fullDay: "02",
fullDate: "2018-03-02"
},
//......
//(后面的數(shù)據(jù)同上)
]
}
year就是年份，month是月份，day是日期，fullDate是完整日期。
fullMonth和fullDay原本是兩個(gè)不需要的數(shù)據(jù)，但是在點(diǎn)擊日期改變顏色的時(shí)候用到了，因?yàn)樾〕绦驔](méi)有提供很好的處理數(shù)據(jù)的filter。當(dāng)然這個(gè)問(wèn)題也和我的個(gè)人水平有關(guān)，如果有哪位大神有更好的方法，請(qǐng)留言告訴我。我非常想去掉這兩個(gè)數(shù)據(jù)。
// calendar.js文件
Page({
data: {
week_list: ["日","一","二","三","四","五","六"],
startDate: "",
endDate: "",
date_click: 0
},
// 獲取每月總天數(shù)
getAllDaysOfMonth(year,month) {
return new Date(year,month,0).getDate();
},
// 獲取每月第一天是星期幾
getFirstDayOfMonth(year,month) {
return new Date(year, month - 1, 1).getDay();
},
// 計(jì)算本月前空了幾格
getEmptyGrids(year,month) {
// FirstDayOfMonth代表本月的第一天是星期幾
const FirstDayOfMonth = this.getFirstDayOfMonth(year, month);
let emptyGrids = [];
// 有空格的情況
if (FirstDayOfMonth > 0) {
for (let i = 0; i < FirstDayOfMonth; i++) {
emptyGrids.push({
"num": "",
"fullDate": "x" //x是我自己定義的一個(gè)值，代表沒(méi)有日期
});
}
// 將空格放入數(shù)組
return emptyGrids;
}else{
// 否則返回一個(gè)新數(shù)組
return [];
}
},
// 計(jì)算本月日歷
getDaysOfThisMonth(year,month) {
let days = [];
const AllDaysOfMonth = this.getAllDaysOfMonth(year, month);
let fullMonth = month.toString().length === 1 ? `0${month}`:month;
for (let i = 0; i < AllDaysOfMonth; i++) {
let day = i+1,
fullDay = day;
fullDay = fullDay.toString().length === 1 ? `0${day}` : fullDay;
days.push({
day,
fullDay,
"fullDate": `${year}-${fullMonth}-${fullDay}`
});
}
// 返回每個(gè)月的具體日期
return days;
},
// 循環(huán)渲染日歷
// 從本月開(kāi)始渲染，n代表包括本月開(kāi)始連續(xù)渲染幾個(gè)月
fillCalendar(n) {
let year = this.data.cur_year,
month = this.data.cur_month,
fullMonth,
canlendar_data = [];
// 計(jì)算年月以及具體日歷
for (let i = this.data.cur_month; i < this.data.cur_month + n; i++) {
let EmptyGrids = this.getEmptyGrids(year, month);
let DaysOfThisMonth = this.getDaysOfThisMonth(year, month);
// 把空格和具體日歷合為一個(gè)數(shù)組
let allDays = [...EmptyGrids, ...DaysOfThisMonth];
// 對(duì)年份和月份的計(jì)算做一些判斷
if (month > 12) {
year++;
month = 1;
fullMonth = "01"
canlendar_data.push({
year,
month,
fullMonth,
allDays });
month++;
}else{
fullMonth = month.toString().length === 1 ? `0${month}` : month;
canlendar_data.push({
year,
month,
fullMonth,
allDays });
month++;
}
}
this.setData({
canlendar_data
})
},
onLoad() {
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const cur_day = date.getDate();
this.setData({
date,
cur_year,
cur_month,
cur_day
})
let month = this.data.cur_month.toString().length === 1 ? `0${this.data.cur_month}` : this.data.cur_month;
let day = this.data.cur_day.toString().length === 1 ? `0${this.data.cur_day}` : this.data.cur_day;
let nowDate = `${cur_year}-${month}-${day}`;
this.setData({
nowDate
})
this.fillCalendar(6);
},
// 點(diǎn)擊日期
chooseDate(e) {
const year_click = e.currentTarget.dataset.year;
const month_click = e.currentTarget.dataset.month;
const day_click = e.currentTarget.dataset.day;
console.log(year_click,month_click,day_click);
// 如果是空格或者以前的日期就直接返回
if(day_click === ""||`${year_click}-${month_click}-${day_click}` < this.data.nowDate) {
return;
}
// 獲取點(diǎn)擊對(duì)象的id
let id = e.currentTarget.dataset.id;
// data_click為0代表選擇的是入住日期，否則就是離店日期
if (this.data.date_click == 0){
// 選擇入住日期
this.setData({
startDate: `${year_click}-${month_click}-${day_click}`,
date_click: 1
})
}else {
let newDay = new Date(Date.parse(id));
let oldDay = new Date(Date.parse(this.data.startDate));
// 判斷第二次點(diǎn)擊的日期在第一次點(diǎn)擊的日期前面還是后面
if (newDay > oldDay) {
this.setData({
endDate: `${year_click}-${month_click}-${day_click}`,
date_click: 2
})
}else{
this.setData({
startDate: `${year_click}-${month_click}-${day_click}`,
endDate: "",
date_click: 1
})
}
}
}
})
