472 lines
13 KiB
JavaScript
472 lines
13 KiB
JavaScript
// components/calendar/calendar.js
|
||
Component({
|
||
options: {
|
||
styleIsolation: 'apply-shared'
|
||
},
|
||
properties: {
|
||
date: {
|
||
type: null,
|
||
value: new Date()
|
||
},
|
||
/**
|
||
* 选中的日期
|
||
*/
|
||
selected: {
|
||
type: Array,
|
||
value: [],
|
||
observer(newVal, oldVal) {
|
||
this.getWeek(new Date())
|
||
}
|
||
},
|
||
/**
|
||
* 锁定日期
|
||
*/
|
||
lockDay: {
|
||
type: String,
|
||
},
|
||
/**
|
||
* 是否默认展开, 可以调用open事件展开组件
|
||
*/
|
||
isOpen: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
/**
|
||
* 是否多选日期
|
||
*/
|
||
multiple:{
|
||
type: Boolean,
|
||
value: true
|
||
},
|
||
/**
|
||
* 是否展示头部
|
||
*/
|
||
showHeader: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
/**
|
||
* 是否不能修改
|
||
*/
|
||
readonly: {
|
||
type: Boolean,
|
||
value: true
|
||
},
|
||
/**
|
||
* 使用mini样式
|
||
*/
|
||
mini:{
|
||
type: Boolean,
|
||
value: true
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
calShow: true, // 日历组件是否打开
|
||
dateShow: false, // 日期是否选择
|
||
selectDay: '', // 当前选择日期
|
||
selectDays: [], //多选日期
|
||
canlender: {
|
||
"weeks": []
|
||
},
|
||
currentMonth: null,
|
||
nowMonth: new Date().getMonth()+1,
|
||
nowDate: new Date().getDate()
|
||
},
|
||
ready() {
|
||
let sdays = this.data.selected;
|
||
sdays.forEach(v=>{
|
||
this.data.selectDays.push(v);
|
||
})
|
||
this.getWeek(new Date());
|
||
if (this.data.isOpen) {
|
||
this.setData({
|
||
calShow: false,
|
||
dateShow: true
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
open: function(date) {
|
||
if(date && date!=''){
|
||
this.data.selectDays = []; //打开时候显示一个
|
||
this.data.selectDays.push(date);
|
||
this.setData({
|
||
selectDays: this.data.selectDays
|
||
})
|
||
this.getWeek(date);
|
||
}
|
||
this.dateSelection();
|
||
},
|
||
close: function() {
|
||
this.packup();
|
||
},
|
||
clear: function(){
|
||
this.setData({
|
||
selectDays: []
|
||
})
|
||
let m;
|
||
if(this.data.currentMonth == null){
|
||
m = this.data.canlender.month
|
||
}else{
|
||
m = this.data.currentMonth
|
||
}
|
||
let year = this.data.canlender.year + "-" + m + "-" + this.data.canlender.date
|
||
let _date = this.getDate(year, 0);
|
||
this.getWeek(_date);
|
||
this.triggerEvent("clear",{})
|
||
},
|
||
dateSelection() {
|
||
if (this.data.isOpen) {
|
||
return
|
||
}
|
||
let self = this;
|
||
if (self.data.calShow) {
|
||
self.setData({
|
||
calShow: false
|
||
}, () => {
|
||
setTimeout(() => {
|
||
self.setData({
|
||
dateShow: true
|
||
}, () => {
|
||
self.triggerEvent('show', {
|
||
ischeck: !self.data.calShow
|
||
})
|
||
})
|
||
}, 100)
|
||
})
|
||
} else {
|
||
self.setData({
|
||
dateShow: false
|
||
}, () => {
|
||
setTimeout(() => {
|
||
self.setData({
|
||
calShow: true
|
||
}, () => {
|
||
self.triggerEvent('show', {
|
||
ischeck: !self.data.calShow
|
||
})
|
||
})
|
||
}, 300)
|
||
})
|
||
}
|
||
},
|
||
//选择日期
|
||
selectDay(e) {
|
||
if(this.data.readonly){
|
||
return
|
||
}
|
||
let index = e.currentTarget.dataset.index;
|
||
let week = e.currentTarget.dataset.week;
|
||
let ischeck = e.currentTarget.dataset.ischeck;
|
||
let canlender = this.data.canlender;
|
||
if (!ischeck) return false;
|
||
let month = canlender.weeks[week][index].month < 10 ? "0" + canlender.weeks[week][index].month : canlender.weeks[week][index].month
|
||
let date = canlender.weeks[week][index].date < 10 ? "0" + canlender.weeks[week][index].date : canlender.weeks[week][index].date
|
||
let datestr = canlender.year + "-" + month + "-" + date;
|
||
let selectDays = this.data.selectDays;
|
||
if (selectDays.indexOf(datestr)==-1) {
|
||
if(this.data.multiple){
|
||
//多选
|
||
selectDays.push(datestr);
|
||
}else{
|
||
selectDays = []; //只保留最后选的
|
||
selectDays.push(datestr);
|
||
}
|
||
}else{
|
||
let index = selectDays.indexOf(datestr);
|
||
selectDays.splice(index, 1);
|
||
}
|
||
selectDays.sort(function(a, b){
|
||
let ds1 = a.split("-");
|
||
let ds2 = b.split("-");
|
||
let d1 = new Date(ds1[0], ds1[1], ds1[2]);
|
||
let d2 = new Date(ds2[0], ds2[1], ds2[2]);
|
||
return d1-d2;
|
||
});
|
||
this.data.selectDays = selectDays;
|
||
this.getWeek(datestr);
|
||
this.triggerEvent('getdate', {
|
||
datestr
|
||
})
|
||
},
|
||
//点击确定
|
||
packup() {
|
||
let self = this;
|
||
self.triggerEvent('select', {
|
||
selectDays: self.data.selectDays
|
||
})
|
||
if (this.data.isOpen) {
|
||
let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
|
||
let _date = self.getDate(year, 0);
|
||
self.getWeek(_date);
|
||
return
|
||
}
|
||
self.setData({
|
||
dateShow: false
|
||
}, () => {
|
||
setTimeout(() => {
|
||
self.setData({
|
||
calShow: true
|
||
}, () => {
|
||
let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
|
||
let _date = self.getDate(year, 0);
|
||
self.getWeek(_date);
|
||
})
|
||
}, 300)
|
||
})
|
||
},
|
||
/**
|
||
* 页面通过事件选中日期后调用refresh方法刷新日历组件
|
||
*/
|
||
refresh: function (num){
|
||
this.setData({
|
||
selectDays: num
|
||
})
|
||
let m;
|
||
if(this.data.currentMonth == null){
|
||
m = this.data.canlender.month
|
||
}else{
|
||
m = this.data.currentMonth
|
||
}
|
||
|
||
let year = this.data.canlender.year + "-" + m + "-" + this.data.canlender.date
|
||
let _date = this.getDate(year, 0);
|
||
this.getWeek(_date);
|
||
},
|
||
// 返回今天
|
||
backtoday() {
|
||
if(!this.data.readonly){
|
||
let datestr = this.dateStr(new Date());
|
||
this.data.selectDays.push(datestr);
|
||
this.setData({
|
||
selectDays: this.data.selectDays
|
||
});
|
||
this.triggerEvent('getdate', {
|
||
datestr
|
||
})
|
||
}
|
||
this.getWeek(new Date());
|
||
},
|
||
// 前一天|| 后一天
|
||
dataBefor(e) {
|
||
let num = 0;
|
||
let types = e.currentTarget.dataset.type;
|
||
|
||
if (e.currentTarget.dataset.id === "0") {
|
||
num = -1;
|
||
} else {
|
||
num = 1
|
||
}
|
||
let year = this.data.canlender.year + "-" + this.data.canlender.month + "-" + this.data.canlender.date
|
||
let _date = this.getDate(year, num, types === 'month' ? "month" : "day");
|
||
this.getWeek(_date);
|
||
},
|
||
|
||
// 获取日历内容
|
||
getWeek(dateData) {
|
||
|
||
let selected = this.data.selected
|
||
let selectDays = this.data.selectDays
|
||
// 判断当前是 安卓还是ios ，传入不容的日期格式
|
||
if (typeof dateData !== 'object') {
|
||
dateData = dateData.replace(/-/g, "/")
|
||
}
|
||
let _date = new Date(dateData);
|
||
let year = _date.getFullYear(); //年
|
||
let month = _date.getMonth() + 1; //月
|
||
let date = _date.getDate(); //日
|
||
let day = _date.getDay(); // 天
|
||
let canlender = [];
|
||
|
||
let dates = {
|
||
firstDay: new Date(year, month - 1, 1).getDay(),
|
||
lastMonthDays: [], // 上个月末尾几天
|
||
currentMonthDys: [], // 本月天数
|
||
nextMonthDays: [], // 下个月开始几天
|
||
endDay: new Date(year, month, 0).getDay(),
|
||
weeks: []
|
||
}
|
||
// 循环上个月末尾几天添加到数组
|
||
for (let i = dates.firstDay; i > 0; i--) {
|
||
let dd = new Date(year, month-1, -(i-1));
|
||
let checked = false;
|
||
selectDays.forEach(v => {
|
||
let selDate = v.date.split('-');
|
||
let ddstr = this.dateStr(dd);
|
||
if (ddstr == v) {
|
||
checked = true;
|
||
}
|
||
})
|
||
dates.lastMonthDays.push({
|
||
'date': '',
|
||
'month': '',
|
||
checked
|
||
})
|
||
}
|
||
// 循环本月天数添加到数组
|
||
for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
|
||
let have = false;
|
||
let checked = false;
|
||
let step = '';
|
||
// for (let j = 0; j < selected.length; j++) {
|
||
// let selDate = selected[j].split('-');
|
||
// if (Number(year) === Number(selDate[0]) && Number(month) === Number(selDate[1]) && Number(i) === Number(selDate[2])) {
|
||
// have = true;
|
||
// }
|
||
// }
|
||
selectDays.forEach(v => {
|
||
let selDate = v.date.split('-');
|
||
if (Number(year) === Number(selDate[0]) && Number(month) === Number(selDate[1]) && Number(i) === Number(selDate[2])) {
|
||
checked = true;
|
||
step = v.step;
|
||
}
|
||
})
|
||
dates.currentMonthDys.push({
|
||
'date': i + "",
|
||
'month': month,
|
||
// have,
|
||
checked,
|
||
step
|
||
})
|
||
}
|
||
// 循环下个月开始几天 添加到数组
|
||
for (let i = 1; i < 7 - dates.endDay; i++) {
|
||
dates.nextMonthDays.push({
|
||
'date': '',
|
||
'month': ''
|
||
})
|
||
}
|
||
|
||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||
for (let i = 0; i < canlender.length; i++) {
|
||
if (i % 7 == 0) {
|
||
dates.weeks[parseInt(i / 7)] = new Array(7);
|
||
}
|
||
dates.weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||
}
|
||
// 渲染数据
|
||
this.setData({
|
||
selectDay: month + "月" + date + "日",
|
||
"canlender.weeks": dates.weeks,
|
||
'canlender.month': month,
|
||
'canlender.date': date,
|
||
"canlender.day": day,
|
||
'canlender.year': year,
|
||
})
|
||
month = month < 10 ? "0" + month : month
|
||
date = date < 10 ? "0" + date : date
|
||
// let localstr = year+"-"+month+"-"+date;
|
||
// this.triggerEvent('getdate', {
|
||
// year,
|
||
// month,
|
||
// date,
|
||
// localstr
|
||
// })
|
||
|
||
// console.log(dates.weeks);
|
||
|
||
},
|
||
checkall(){
|
||
let date = new Date();
|
||
let m, d, day, dayNum;
|
||
let days = [];
|
||
if(this.data.currentMonth == null){
|
||
m = parseInt(this.data.nowMonth)
|
||
}else{
|
||
m = parseInt(this.data.currentMonth)
|
||
}
|
||
|
||
switch (m) {
|
||
case 1:
|
||
case 3:
|
||
case 5:
|
||
case 7:
|
||
case 8:
|
||
case 10:
|
||
case 12:
|
||
dayNum = 31;
|
||
break;
|
||
case 4:
|
||
case 6:
|
||
case 9:
|
||
case 11:
|
||
dayNum = 30;
|
||
break;
|
||
case 2:
|
||
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
|
||
dayNum = 29;
|
||
} else {
|
||
dayNum = 28;
|
||
}
|
||
break;
|
||
}
|
||
for (d = 1; d <= dayNum; d++) {
|
||
date.setMonth(m - 1, d);
|
||
day = date.getDay();
|
||
let str = this.format(date);
|
||
if(date.getMonth() == new Date().getMonth()){
|
||
if(date.getDate() - new Date().getDate() >= 0){
|
||
days.push(str);
|
||
}
|
||
}else if(date.getMonth() > new Date().getMonth()){
|
||
days.push(str);
|
||
}
|
||
}
|
||
this.refresh(days);
|
||
this.triggerEvent('checkall', {
|
||
days
|
||
})
|
||
},
|
||
/**
|
||
* 时间计算
|
||
*/
|
||
getDate(date, AddDayCount, str = 'day') {
|
||
if (typeof date !== 'object') {
|
||
date = date.replace(/-/g, "/")
|
||
}
|
||
let dd = new Date(date)
|
||
switch (str) {
|
||
case 'day':
|
||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||
break;
|
||
case 'month':
|
||
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
|
||
break;
|
||
case 'year':
|
||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||
break;
|
||
}
|
||
let y = dd.getFullYear()
|
||
let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) // 获取当前月份的日期，不足10补0
|
||
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||
this.setData({
|
||
currentMonth: m
|
||
})
|
||
return y + '-' + m + '-' + d
|
||
},
|
||
//日期转字符串
|
||
dateStr(calendar){
|
||
let year = calendar.getFullYear();
|
||
let month = calendar.getMonth()+1;
|
||
let date = calendar.getDate();
|
||
month = month < 10 ? "0" + month : month;
|
||
date = date < 10 ? "0" + date : date;
|
||
let datestr = year + "-" + month + "-" + date;
|
||
return datestr;
|
||
},
|
||
format(dd){
|
||
let y = dd.getFullYear()
|
||
let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1)
|
||
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
|
||
return y + '-' + m + '-' + d
|
||
}
|
||
}
|
||
}) |