dateDays.vue
2.96 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
<template>
<div class="datepicker-days vue-show-imo">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" @click="prev">
<i class="fa fa-chevron-left fi-arrow-left"></i>
</th>
<th colspan="5" class="date-switch" @click="tomonth">{{month}} {{year}}</th>
<th class="next" @click="next">
<i class="fa fa-chevron-right fi-arrow-right"></i>
</th>
</tr>
<tr>
<th class="dow" v-for="week in weeks">{{week}}</th>
</tr>
</thead>
<tbody>
<tr v-for="week in calendar">
<td :class="{today: day.date.toDateString() === new Date().toDateString(), selected: day.day === this.currentDay, old: isnot(day,$index)}" v-for="day in week" track-by="$index" v-text="day.day === 32 ? '' : day.day" @click="selectDate(day,$index)"></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props:["dateTime","mo","state"],
data(){
return {
// date: new Date(this.dateText),
weeks: ['日', '一', '二', '三', '四', '五', '六'],
months:['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
currentDay: ""
}
},
computed: {
month() {
return this.months[this.dateTime.month]
},
year() {
return this.dateTime.year
},
calendar() {
let result = []
let calendar = []
let date = this.dateTime
let year = this.year
let month = this.month
let first = new Date(date.year, date.month, 1).getDay()
let days = new Date(date.year, date.month + 1, 0).getDate()
for (let i = 0; i < days; i++, first++) {
calendar[first] = i + 1
}
calendar = calendar.filter((v) => v)
// 切割
first -= days
result[0] = []
let currentDay = first
for (let i = 0; i < 7 - currentDay; i++, first++) {
result[0][first] = {
day: i + 1,
date: new Date(`${year}/${month}/${i + 1}`)
}
}
while(currentDay > -1) {
result[0][currentDay - 1] = {
day: 32,
date: new Date(`${year}/${month}/32`)
}
currentDay--
}
let count = Math.ceil((days - (7 - first)) / 7)
let lastDay = result[0].slice(-1)[0].day
for (let i = 1; i <= count; i++) {
result[i] = []
for (let ii = 0; ii < 7; ii++) {
result[i][ii] = {
day: calendar[lastDay + ii],
date: new Date(`${year}/${month}/${calendar[lastDay + ii]}`)
}
}
lastDay += 7
}
//console.dir(result)
return result
}
},
methods: {
prev() {
this.currentDay = ""
this.dateTime.month-=1
},
next() {
this.currentDay = ""
this.dateTime.month+=1
},
selectDate(value,index) {
if(this.isnot(value,index)){
return
}
this.dateTime.date=value.day
this.dateTime._hasdefault=true
this.mo=''
},
tomonth(){
this.mo="month"
},
isnot(day,index){
console.log(this.state);
if(this.state=="week"){
return ! day.day || day.day === 32||index!==0;
}
return ! day.day || day.day === 32;
}
},
ready() {
this.currentDay = this.dateTime.date
}
}
</script>