Skip to content

Commit 300fc9a

Browse files
wangxueliangwangxueliang
committed
feat: update date-picker
1 parent 103293a commit 300fc9a

File tree

12 files changed

+150
-59
lines changed

12 files changed

+150
-59
lines changed

‎components/date-picker/RangePicker.jsx

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import classNames from 'classnames';
55
import shallowequal from 'shallowequal';
66
import Icon from '../icon';
77
import Tag from '../tag';
8+
import { ConfigConsumerProps } from '../config-provider';
89
import interopDefault from '../_util/interopDefault';
910
import { RangePickerProps } from './interface';
1011
import {
@@ -73,11 +74,12 @@ export default {
7374
event: 'change',
7475
},
7576
props: initDefaultProps(RangePickerProps(), {
76-
prefixCls: 'ant-calendar',
77-
tagPrefixCls: 'ant-tag',
7877
allowClear: true,
7978
showToday: false,
8079
}),
80+
inject: {
81+
configProvider: { default: () => ({}) },
82+
},
8183
data() {
8284
const value = this.value || this.defaultValue || [];
8385
const [start, end] = value;
@@ -109,13 +111,24 @@ export default {
109111
};
110112
}
111113
this.setState(state);
114+
this.prevState = {...this.$data, ...state};
112115
},
113116
open(val) {
114-
this.setState({
115-
sOpen: val,
116-
});
117+
const state = { sOpen: val};
118+
this.setState(state);
119+
this.prevState = {...this.$data, ...state};
117120
},
118121
},
122+
mounted() {
123+
this.prevState = {...this.$data};
124+
},
125+
updated() {
126+
this.$nextTick(() => {
127+
if(!hasProp(this, 'open') && this.prevState.sOpen && !this.sOpen) {
128+
this.focus();
129+
}
130+
});
131+
},
119132
methods: {
120133
clearSelection(e) {
121134
e.preventDefault();
@@ -148,10 +161,6 @@ export default {
148161
this.clearHoverValue();
149162
}
150163
this.$emit('openChange', open);
151-
152-
if (!open) {
153-
this.focus();
154-
}
155164
},
156165

157166
handleShowDateChange(showDate) {
@@ -212,7 +221,8 @@ export default {
212221
},
213222

214223
renderFooter(...args) {
215-
const { prefixCls, ranges, $scopedSlots, $slots, tagPrefixCls } = this;
224+
const { ranges, $scopedSlots, $slots } = this;
225+
const { _prefixCls: prefixCls, _tagPrefixCls: tagPrefixCls } = this;
216226
const renderExtraFooter =
217227
this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
218228
if (!ranges && !renderExtraFooter) {
@@ -268,7 +278,8 @@ export default {
268278
panelChange = noop,
269279
} = $listeners;
270280
const {
271-
prefixCls,
281+
prefixCls: customizePrefixCls,
282+
tagPrefixCls: customizeTagPrefixCls,
272283
popupStyle,
273284
disabledDate,
274285
disabledTime,
@@ -279,6 +290,12 @@ export default {
279290
localeCode,
280291
format,
281292
} = props;
293+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
294+
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
295+
const tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
296+
this._prefixCls = prefixCls;
297+
this._tagPrefixCls = tagPrefixCls;
298+
282299
const dateRender = props.dateRender || $scopedSlots.dateRender;
283300
fixLocale(value, localeCode);
284301
fixLocale(showDate, localeCode);

‎components/date-picker/WeekPicker.jsx

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as moment from 'moment';
22
import Calendar from '../vc-calendar';
33
import VcDatePicker from '../vc-calendar/src/Picker';
44
import Icon from '../icon';
5+
import { ConfigConsumerProps } from '../config-provider';
56
import {
67
hasProp,
78
getOptionProps,
@@ -36,6 +37,9 @@ export default {
3637
format: 'gggg-wo',
3738
allowClear: true,
3839
}),
40+
inject: {
41+
configProvider: { default: () => ({}) },
42+
},
3943
data() {
4044
const value = this.value || this.defaultValue;
4145
if (value && !interopDefault(moment).isMoment(value)) {
@@ -50,29 +54,44 @@ export default {
5054
},
5155
watch: {
5256
value(val) {
53-
this.setState({ _value: val });
57+
const state = { _value: val };
58+
this.setState(state);
59+
this.prevState = {...this.$data, ...state};
5460
},
5561
open(val) {
56-
this.setState({ _open: val });
62+
const state = { _open: val };
63+
this.setState(state);
64+
this.prevState = {...this.$data, ...state};
5765
},
5866
},
59-
67+
mounted() {
68+
this.prevState = {...this.$data};
69+
},
70+
updated() {
71+
this.$nextTick(() => {
72+
if(!hasProp(this, 'open') && this.prevState._open && !this._open) {
73+
this.focus();
74+
}
75+
});
76+
},
6077
methods: {
6178
weekDateRender(current) {
6279
const selectedValue = this.$data._value;
63-
const { prefixCls } = this;
80+
const { _prefixCls: prefixCls, $scopedSlots } = this;
81+
const dateRender = this.dateRender || $scopedSlots.dateRender;
82+
const dateNode = dateRender ? dateRender(current) : current.date();
6483
if (
6584
selectedValue &&
6685
current.year() === selectedValue.year() &&
6786
current.week() === selectedValue.week()
6887
) {
6988
return (
7089
<div class={`${prefixCls}-selected-day`}>
71-
<div class={`${prefixCls}-date`}>{current.date()}</div>
90+
<div class={`${prefixCls}-date`}>{dateNode}</div>
7291
</div>
7392
);
7493
}
75-
return <div class={`${prefixCls}-date`}>{current.date()}</div>;
94+
return <div class={`${prefixCls}-date`}>{dateNode}</div>;
7695
},
7796
handleChange(value) {
7897
if (!hasProp(this, 'value')) {
@@ -85,17 +104,19 @@ export default {
85104
this.setState({ _open: open });
86105
}
87106
this.$emit('openChange', open);
88-
89-
if (!open) {
90-
this.focus();
91-
}
92107
},
93108
clearSelection(e) {
94109
e.preventDefault();
95110
e.stopPropagation();
96111
this.handleChange(null);
97112
},
98-
113+
renderFooter(...args) {
114+
const {_prefixCls: prefixCls, $scopedSlots} = this;
115+
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter;
116+
return renderExtraFooter ? (
117+
<div class={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
118+
) : null;
119+
},
99120
focus() {
100121
this.$refs.input.focus();
101122
},
@@ -110,7 +131,7 @@ export default {
110131
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
111132
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
112133
const {
113-
prefixCls,
134+
prefixCls: customizePrefixCls,
114135
disabled,
115136
pickerClass,
116137
popupStyle,
@@ -124,6 +145,11 @@ export default {
124145
$listeners,
125146
$scopedSlots,
126147
} = this;
148+
149+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
150+
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
151+
this._prefixCls = prefixCls;
152+
127153
const { _value: pickerValue, _open: open } = $data;
128154
const { focus = noop, blur = noop } = $listeners;
129155

@@ -143,6 +169,7 @@ export default {
143169
showDateInput={false}
144170
showToday={false}
145171
disabledDate={disabledDate}
172+
renderFooter={this.renderFooter}
146173
/>
147174
);
148175
const clearIcon =

‎components/date-picker/createPicker.js

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MonthCalendar from '../vc-calendar/src/MonthCalendar';
44
import VcDatePicker from '../vc-calendar/src/Picker';
55
import classNames from 'classnames';
66
import Icon from '../icon';
7+
import { ConfigConsumerProps } from '../config-provider';
78
import interopDefault from '../_util/interopDefault';
89
import BaseMixin from '../_util/BaseMixin';
910
import {
@@ -23,15 +24,7 @@ import { cloneElement } from '../_util/vnode';
2324
function noop() {}
2425
export default function createPicker(TheCalendar, props) {
2526
return {
26-
// static defaultProps = {
27-
// prefixCls: 'ant-calendar',
28-
// allowClear: true,
29-
// showToday: true,
30-
// };
31-
32-
// private input: any;
3327
props: initDefaultProps(props, {
34-
prefixCls: 'ant-calendar',
3528
allowClear: true,
3629
showToday: true,
3730
}),
@@ -40,6 +33,9 @@ export default function createPicker(TheCalendar, props) {
4033
prop: 'value',
4134
event: 'change',
4235
},
36+
inject: {
37+
configProvider: { default: () => ({}) },
38+
},
4339
data() {
4440
const value = this.value || this.defaultValue;
4541
if (value && !interopDefault(moment).isMoment(value)) {
@@ -62,6 +58,7 @@ export default function createPicker(TheCalendar, props) {
6258
state.showDate = props.value;
6359
}
6460
this.setState(state);
61+
this.prevState = {...this.$data, ...state};
6562
},
6663
value(val) {
6764
const state = {};
@@ -70,11 +67,23 @@ export default function createPicker(TheCalendar, props) {
7067
state.showDate = val;
7168
}
7269
this.setState(state);
70+
this.prevState = {...this.$data, ...state};
7371
},
7472
},
73+
mounted() {
74+
this.prevState = {...this.$data};
75+
},
76+
updated() {
77+
this.$nextTick(() => {
78+
if(!hasProp(this, 'open') && this.prevState._open && !this._open) {
79+
this.focus();
80+
}
81+
});
82+
},
7583
methods: {
7684
renderFooter(...args) {
77-
const { prefixCls, $scopedSlots, $slots } = this;
85+
const { $scopedSlots, $slots } = this;
86+
const { _prefixCls: prefixCls } = this;
7887
const renderExtraFooter =
7988
this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
8089
return renderExtraFooter ? (
@@ -111,9 +120,6 @@ export default function createPicker(TheCalendar, props) {
111120
this.setState({ _open: open });
112121
}
113122
this.$emit('openChange', open);
114-
if (!open) {
115-
this.focus();
116-
}
117123
},
118124
focus() {
119125
this.$refs.input.focus();
@@ -137,7 +143,12 @@ export default function createPicker(TheCalendar, props) {
137143
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
138144
const { panelChange = noop, focus = noop, blur = noop, ok = noop } = $listeners;
139145
const props = getOptionProps(this);
140-
const { prefixCls, locale, localeCode } = props;
146+
147+
const { prefixCls: customizePrefixCls, locale, localeCode } = props;
148+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
149+
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
150+
this._prefixCls = prefixCls;
151+
141152
const dateRender = props.dateRender || $scopedSlots.dateRender;
142153
const monthCellContentRender =
143154
props.monthCellContentRender || $scopedSlots.monthCellContentRender;

‎components/date-picker/demo/mode.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Determing which panel to show with `mode` and `onPanelChange`.
2525
:value="value"
2626
:mode="mode2"
2727
@panelChange="handlePanelChange2"
28+
@change="handleChange"
2829
/>
2930
</div>
3031
</template>
@@ -43,7 +44,9 @@ export default {
4344
this.mode1 = 'time'
4445
}
4546
},
46-
47+
handleChange(value){
48+
this.value = value
49+
},
4750
handlePanelChange1(value, mode) {
4851
this.mode1 = mode
4952
},

‎components/date-picker/demo/time.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ This property provide an additional time selection. When `showTime` is an Object
1414
<div>
1515
<a-date-picker
1616
showTime
17-
format="YYYY-MM-DD HH:mm:ss"
1817
placeholder="Select Time"
1918
@change="onChange"
2019
@ok="onOk"

‎components/date-picker/index.en-US.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
3232
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
3333
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
3434
| locale | localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
35+
| mode | picker panel mode | `time|date|month|year` | 'date' |
3536
| open | open state of picker | boolean | - |
3637
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
3738
| popupStyle | to customize the style of the popup calendar | object | {} |
@@ -61,7 +62,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
6162
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
6263
| disabledTime | to specify the time that cannot be selected | function(date) | - |
6364
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
64-
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
65+
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" slot-scope="mode" | - |
6566
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
6667
| showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
6768
| showToday | whether to show "Today" button | boolean | true |
@@ -82,7 +83,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
8283
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
8384
| format | to set the date format. When an array is provided, all values are used for parsing and first value for display. refer to [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM" |
8485
| monthCellContentRender | Custom month cell content render method by setting a scoped slot | slot="monthCellContentRender" slot-scope="date, locale" | - |
85-
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
86+
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" slot-scope="mode" | - |
8687
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
8788

8889
### MonthPicker Events
@@ -98,6 +99,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
9899
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
99100
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" |
100101
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
102+
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" slot-scope="mode" | - |
101103

102104
### WeekPicker Events
103105
| Events Name | Description | Arguments |
@@ -113,7 +115,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
113115
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment\], partial: `'start'|'end'`) | - |
114116
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
115117
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |
116-
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
118+
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" slot-scope="mode" | - |
117119
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
118120
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |
119121
| value(v-model) | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |

0 commit comments

Comments
 (0)