date-picker.js
3.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import Date from '@/utils/date.js';
export default {
props: {
// 周末是否可选
weekend: {
type: Boolean,
default: false
},
filterDates: {
type: Array,
default(){
return ["2019-11-26", "2019-11-28"]
}
}
},
data() {
return {
key: 'value',
year: 1970,
month: 1, // (1~12)
date: 1, // (1~31)
day: 0, // (0~6)
// 用户渲染的数据
fortmatMonthData: [],
}
},
components: {},
methods: {
/**
* 画月历图
* 所需数据
* year 年
* month 月 (1~12)
* date 日 (1~31)
* day 星期几 (0-6)
*
* 输出数据
* fortmatMonthData 用于渲染日历的数据
*/
formatMonth() {
let result = [];
let year = this.year;
let month = this.month;
// 获取当月天数
let dayNum = Date.getDaysInMonth(year, month - 1);
/**
* 排布出当月号码
* 组装数据
*/
for (let index = 0; index < dayNum; index++) {
let curData = {}
curData.standards = 0;
let date = index + 1;
let day = Date.parse(`${year}.${month}.${date}`).getDay();
let isWeekend = day == 0 || day == 6;
let disable = false; // 判断是否不可选
disable = isWeekend && !this.weekend; // 判断周末不可选
let filterDates = this.filterDates;
filterDates.forEach(element => {
let curDate = `${year}-${month}-${date}`;
if (element == curDate) {
disable = true;
}
});
curData = Object.assign({
year: year,
month: month,
date: date, // (1~31)
day: day,
isWeekend: isWeekend,
disable: disable,
}, curData);
result.push(curData);
}
// 当月1号星期几 0-6 往前塞值
let dateStr = month + '.' + '1' + '.' + year;
let firstDay = Date.parse(dateStr).getDay();
// 根据星期几在前面补空格 星期日0格子,星期一1格子,星期六6格子
for (let index = 0; index < firstDay; index++) {
result.unshift(null);
}
this.fortmatMonthData = result;
},
// 加/减 月份
addMonths(value) {
let dateStr = this.month + '.' + this.date + '.' + this.year;
let targetDate = Date.parse(dateStr).addMonths(value);
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.date = targetDate.getDate();
this.formatMonth();
},
// 上一个月
prevMonth() {
this.addMonths(-1);
},
// 下一个月
nextMonth() {
this.addMonths(1);
},
// 加/减 年份
addYear(value) {
let dateStr = this.month + '.' + this.date + '.' + this.year;
let targetDate = Date.parse(dateStr).addYears(value);
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.formatMonth();
},
// 上一年
prevYear() {
this.addYear(-1);
},
// 下一年
nextYear() {
this.addYear(1);
},
selectDay(item) {
if (!item) return;
let curData = item;
let date = curData.date;
this.date = date;
},
initData() {}
},
mounted() {},
created() {
// 设置今天日期
let today = Date.today();
this.year = today.getFullYear();
this.month = today.getMonth() + 1;
this.date = today.getDate();
this.formatMonth();
}
}