17e1fcf1
 梁灏
init DatePicker
|
1
|
<template>
|
|
0f677893
梁灏
update DatePicker
|
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
|
<div :class="[prefixCls + '-body-wrapper']">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
<div
:class="[prefixCls + '-shortcut']"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear"></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="currentView === 'date'"></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker">{{ }}</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker"
v-show="currentView === 'date'">{{ }}</span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="currentView === 'date'"></span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear"></span>
</div>
<div :class="[prefixCls + '-content']">
<date-table
|
|
50637863
梁灏
update DatePicker
|
35
36
37
38
39
40
41
42
|
v-show="currentView === 'date'"
:year="year"
:month="month"
:date="date"
:value="value"
:week="week"
:selection-mode="selectionMode"
:disabled-date="disabledDate"></date-table>
|
|
0f677893
梁灏
update DatePicker
|
43
44
45
46
47
48
49
|
<year-table
v-show="currentView === 'year'"></year-table>
<month-table
v-show="currentView === 'month'"></month-table>
</div>
</div>
</div>
|
|
17e1fcf1
梁灏
init DatePicker
|
50
51
|
</template>
<script>
|
|
0f677893
梁灏
update DatePicker
|
52
53
54
55
56
57
58
|
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
|
|
17e1fcf1
梁灏
init DatePicker
|
59
|
export default {
|
|
0f677893
梁灏
update DatePicker
|
60
|
components: { DateTable, YearTable, MonthTable },
|
|
17e1fcf1
梁灏
init DatePicker
|
61
|
data () {
|
|
0f677893
梁灏
update DatePicker
|
62
63
64
65
|
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
|
|
50637863
梁灏
update DatePicker
|
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
|
currentView: 'date',
date: new Date(),
value: '',
showTime: false,
selectionMode: 'day',
visible: false,
disabledDate: '',
year: null,
month: null,
week: null,
showWeekNumber: false,
timePickerVisible: false
}
},
computed: {
},
watch: {
value (newVal) {
newVal = new Date(newVal);
if (!isNaN(newVal)) {
// todo
// if (typeof this.disabledDate === 'function' && this.disabledDate(new Date(newVal))) return;
this.date = newVal;
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
// this.$emit('on-pick', newVal, true);
}
|
|
0f677893
梁灏
update DatePicker
|
95
|
}
|
|
17e1fcf1
梁灏
init DatePicker
|
96
|
},
|
|
0f677893
梁灏
update DatePicker
|
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
|
methods: {
handleShortcutClick (shortcut) {
},
iconBtnCls (direction, type = '') {
return [
`${prefixCls}-icon-btn`,
`${datePrefixCls}-${direction}-btn`,
`${datePrefixCls}-${direction}-btn-arrow${type}`,
]
},
prevYear () {
},
nextYear () {
},
prevMonth () {
},
nextMonth () {
},
showYearPicker () {
},
showMonthPicker () {
}
},
|
|
50637863
梁灏
update DatePicker
|
127
128
129
130
131
132
133
134
135
|
compiled () {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
|
|
0f677893
梁灏
update DatePicker
|
136
137
|
},
beforeDestroy () {
|
|
50637863
梁灏
update DatePicker
|
138
|
|
|
0f677893
梁灏
update DatePicker
|
139
|
}
|
|
17e1fcf1
梁灏
init DatePicker
|
140
141
|
}
</script>
|
