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
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import KeyCode from '../../_util/KeyCode';
import CalendarHeader from './calendar/CalendarHeader';
import CalendarFooter from './calendar/CalendarFooter';
import CalendarMixin from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin';
import enUs from './locale/en_US';
var MonthCalendar = {
props: {
locale: PropTypes.object.def(enUs),
format: PropTypes.string,
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func,
disabledDate: PropTypes.func,
monthCellContentRender: PropTypes.func,
renderFooter: PropTypes.func.def(function () {
return null;
}),
renderSidebar: PropTypes.func.def(function () {
return null;
})
},
mixins: [BaseMixin, CommonMixin, CalendarMixin],
data: function data() {
return { mode: 'month' };
},
methods: {
onKeyDown: function onKeyDown(event) {
var keyCode = event.keyCode;
var ctrlKey = event.ctrlKey || event.metaKey;
var stateValue = this.sValue;
var disabledDate = this.disabledDate;
var value = stateValue;
switch (keyCode) {
case KeyCode.DOWN:
value = stateValue.clone();
value.add(3, 'months');
break;
case KeyCode.UP:
value = stateValue.clone();
value.add(-3, 'months');
break;
case KeyCode.LEFT:
value = stateValue.clone();
if (ctrlKey) {
value.add(-1, 'years');
} else {
value.add(-1, 'months');
}
break;
case KeyCode.RIGHT:
value = stateValue.clone();
if (ctrlKey) {
value.add(1, 'years');
} else {
value.add(1, 'months');
}
break;
case KeyCode.ENTER:
if (!disabledDate || !disabledDate(stateValue)) {
this.onSelect(stateValue);
}
event.preventDefault();
return 1;
default:
return undefined;
}
if (value !== stateValue) {
this.setValue(value);
event.preventDefault();
return 1;
}
},
handlePanelChange: function handlePanelChange(_, mode) {
if (mode !== 'date') {
this.setState({ mode: mode });
}
}
},
render: function render() {
var h = arguments[0];
var mode = this.mode,
value = this.sValue,
props = this.$props,
$scopedSlots = this.$scopedSlots;
var prefixCls = props.prefixCls,
locale = props.locale,
disabledDate = props.disabledDate;
var monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender;
var monthCellContentRender = this.monthCellContentRender || $scopedSlots.monthCellContentRender;
var renderFooter = this.renderFooter || $scopedSlots.renderFooter;
var children = h(
'div',
{ 'class': prefixCls + '-month-calendar-content' },
[h(
'div',
{ 'class': prefixCls + '-month-header-wrap' },
[h(CalendarHeader, {
attrs: {
prefixCls: prefixCls,
mode: mode,
value: value,
locale: locale,
disabledMonth: disabledDate,
monthCellRender: monthCellRender,
monthCellContentRender: monthCellContentRender
},
on: {
'monthSelect': this.onSelect,
'valueChange': this.setValue,
'panelChange': this.handlePanelChange
}
})]
), h(CalendarFooter, {
attrs: { prefixCls: prefixCls, renderFooter: renderFooter }
})]
);
return this.renderRoot({
'class': props.prefixCls + '-month-calendar',
children: children
});
}
};
export default MonthCalendar;