feat: update date-picker
tanjinzhou
parent
88d3fc18c6
commit
a3a53613c5
|
|
@ -1,20 +1,22 @@
|
|||
import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
|
||||
import { isValidElement } from '../_util/props-util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default {
|
||||
functional: true,
|
||||
render(h, context) {
|
||||
const { props } = context;
|
||||
const { suffixIcon, prefixCls } = props;
|
||||
return (
|
||||
(suffixIcon && isValidElement(suffixIcon) ? (
|
||||
cloneElement(suffixIcon, {
|
||||
class: `${prefixCls}-picker-icon`,
|
||||
})
|
||||
) : (
|
||||
<span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
|
||||
)) || <CalendarOutlined class={`${prefixCls}-picker-icon`} />
|
||||
);
|
||||
},
|
||||
const InputIcon = (_, { attrs }) => {
|
||||
const { suffixIcon, prefixCls } = attrs;
|
||||
return (
|
||||
(suffixIcon && isValidElement(suffixIcon) ? (
|
||||
cloneElement(suffixIcon, {
|
||||
class: classNames({
|
||||
[suffixIcon.props?.class]: suffixIcon.props.class,
|
||||
[`${prefixCls}-picker-icon`]: true,
|
||||
}),
|
||||
})
|
||||
) : (
|
||||
<span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
|
||||
)) || <CalendarOutlined class={`${prefixCls}-picker-icon`} />
|
||||
);
|
||||
};
|
||||
InputIcon.inheritAttrs = false;
|
||||
export default InputIcon;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { inject } from 'vue';
|
||||
import * as moment from 'moment';
|
||||
import RangeCalendar from '../vc-calendar/src/RangeCalendar';
|
||||
import VcDatePicker from '../vc-calendar/src/Picker';
|
||||
|
|
@ -8,19 +9,11 @@ import Tag from '../tag';
|
|||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import { RangePickerProps } from './interface';
|
||||
import {
|
||||
hasProp,
|
||||
getOptionProps,
|
||||
initDefaultProps,
|
||||
mergeProps,
|
||||
getComponent,
|
||||
getListeners,
|
||||
} from '../_util/props-util';
|
||||
import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { formatDate } from './utils';
|
||||
import InputIcon from './InputIcon';
|
||||
|
||||
function noop() {}
|
||||
function getShowDateFromValue(value, mode) {
|
||||
const [start, end] = value;
|
||||
// value could be an empty array, then we should not reset showDate
|
||||
|
|
@ -70,17 +63,16 @@ function fixLocale(value, localeCode) {
|
|||
export default {
|
||||
name: 'ARangePicker',
|
||||
mixins: [BaseMixin],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(RangePickerProps(), {
|
||||
allowClear: true,
|
||||
showToday: false,
|
||||
separator: '~',
|
||||
}),
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const value = this.value || this.defaultValue || [];
|
||||
|
|
@ -133,6 +125,10 @@ export default {
|
|||
this.setState({ sOpen: false });
|
||||
}
|
||||
},
|
||||
|
||||
savePicker(node) {
|
||||
this.picker = node;
|
||||
},
|
||||
clearSelection(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
@ -212,18 +208,17 @@ export default {
|
|||
},
|
||||
|
||||
focus() {
|
||||
this.$refs.picker.focus();
|
||||
this.picker.focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
this.$refs.picker.blur();
|
||||
this.picker.blur();
|
||||
},
|
||||
|
||||
renderFooter() {
|
||||
const { ranges, $scopedSlots, $slots } = this;
|
||||
const { ranges, $slots } = this;
|
||||
const { _prefixCls: prefixCls, _tagPrefixCls: tagPrefixCls } = this;
|
||||
const renderExtraFooter =
|
||||
this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
if (!ranges && !renderExtraFooter) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -261,7 +256,7 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
const props = getOptionProps(this);
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const {
|
||||
|
|
@ -269,16 +264,8 @@ export default {
|
|||
sShowDate: showDate,
|
||||
sHoverValue: hoverValue,
|
||||
sOpen: open,
|
||||
$scopedSlots,
|
||||
$slots,
|
||||
} = this;
|
||||
const listeners = getListeners(this);
|
||||
const {
|
||||
calendarChange = noop,
|
||||
ok = noop,
|
||||
focus = noop,
|
||||
blur = noop,
|
||||
panelChange = noop,
|
||||
} = listeners;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
tagPrefixCls: customizeTagPrefixCls,
|
||||
|
|
@ -293,6 +280,12 @@ export default {
|
|||
format,
|
||||
separator,
|
||||
inputReadOnly,
|
||||
style,
|
||||
onCalendarChange,
|
||||
onOk,
|
||||
onBlur,
|
||||
onFocus,
|
||||
onPanelChange,
|
||||
} = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
|
|
@ -300,7 +293,7 @@ export default {
|
|||
this._prefixCls = prefixCls;
|
||||
this._tagPrefixCls = tagPrefixCls;
|
||||
|
||||
const dateRender = props.dateRender || $scopedSlots.dateRender;
|
||||
const dateRender = props.dateRender || $slots.dateRender;
|
||||
fixLocale(value, localeCode);
|
||||
fixLocale(showDate, localeCode);
|
||||
|
||||
|
|
@ -311,23 +304,18 @@ export default {
|
|||
|
||||
// 需要选择时间时，点击 ok 时才触发 onChange
|
||||
const pickerChangeHandler = {
|
||||
on: {
|
||||
change: this.handleChange,
|
||||
},
|
||||
onChange: this.handleChange,
|
||||
};
|
||||
let calendarProps = {
|
||||
on: {
|
||||
ok: this.handleChange,
|
||||
},
|
||||
props: {},
|
||||
onOk: this.handleChange,
|
||||
};
|
||||
if (props.timePicker) {
|
||||
pickerChangeHandler.on.change = changedValue => this.handleChange(changedValue);
|
||||
pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
|
||||
} else {
|
||||
calendarProps = { on: {}, props: {} };
|
||||
calendarProps = {};
|
||||
}
|
||||
if ('mode' in props) {
|
||||
calendarProps.props.mode = props.mode;
|
||||
calendarProps.mode = props.mode;
|
||||
}
|
||||
|
||||
const startPlaceholder = Array.isArray(props.placeholder)
|
||||
|
|
@ -337,35 +325,31 @@ export default {
|
|||
? props.placeholder[1]
|
||||
: locale.lang.rangePlaceholder[1];
|
||||
|
||||
const rangeCalendarProps = mergeProps(calendarProps, {
|
||||
props: {
|
||||
separator,
|
||||
format,
|
||||
prefixCls,
|
||||
renderFooter: this.renderFooter,
|
||||
timePicker: props.timePicker,
|
||||
disabledDate,
|
||||
disabledTime,
|
||||
dateInputPlaceholder: [startPlaceholder, endPlaceholder],
|
||||
locale: locale.lang,
|
||||
dateRender,
|
||||
value: showDate,
|
||||
hoverValue,
|
||||
showToday,
|
||||
inputReadOnly,
|
||||
},
|
||||
on: {
|
||||
change: calendarChange,
|
||||
ok,
|
||||
valueChange: this.handleShowDateChange,
|
||||
hoverChange: this.handleHoverChange,
|
||||
panelChange,
|
||||
inputSelect: this.handleCalendarInputSelect,
|
||||
},
|
||||
const rangeCalendarProps = {
|
||||
...calendarProps,
|
||||
separator,
|
||||
format,
|
||||
prefixCls,
|
||||
renderFooter: this.renderFooter,
|
||||
timePicker: props.timePicker,
|
||||
disabledDate,
|
||||
disabledTime,
|
||||
dateInputPlaceholder: [startPlaceholder, endPlaceholder],
|
||||
locale: locale.lang,
|
||||
dateRender,
|
||||
value: showDate,
|
||||
hoverValue,
|
||||
showToday,
|
||||
inputReadOnly,
|
||||
onChange: onCalendarChange,
|
||||
onOk,
|
||||
onValueChange: this.handleShowDateChange,
|
||||
onHoverChange: this.handleHoverChange,
|
||||
onPanelChange,
|
||||
onInputSelect: this.handleCalendarInputSelect,
|
||||
class: calendarClassName,
|
||||
scopedSlots: $scopedSlots,
|
||||
});
|
||||
const calendar = <RangeCalendar {...rangeCalendarProps} />;
|
||||
};
|
||||
const calendar = <RangeCalendar {...rangeCalendarProps} vSlots={$slots} />;
|
||||
|
||||
// default width for showTime
|
||||
const pickerStyle = {};
|
||||
|
|
@ -406,38 +390,31 @@ export default {
|
|||
</span>
|
||||
);
|
||||
};
|
||||
const vcDatePickerProps = mergeProps(
|
||||
{
|
||||
props,
|
||||
on: listeners,
|
||||
},
|
||||
pickerChangeHandler,
|
||||
{
|
||||
props: {
|
||||
calendar,
|
||||
value,
|
||||
open,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
},
|
||||
on: {
|
||||
openChange: this.handleOpenChange,
|
||||
},
|
||||
style: popupStyle,
|
||||
scopedSlots: { default: input, ...$scopedSlots },
|
||||
},
|
||||
);
|
||||
const vcDatePickerProps = {
|
||||
...props,
|
||||
...pickerChangeHandler,
|
||||
calendar,
|
||||
value,
|
||||
open,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
style: popupStyle,
|
||||
};
|
||||
return (
|
||||
<span
|
||||
ref="picker"
|
||||
ref={this.savePicker}
|
||||
id={props.id}
|
||||
class={classNames(props.class, props.pickerClass)}
|
||||
style={{ ...style, ...pickerStyle }}
|
||||
class={props.pickerClass}
|
||||
style={pickerStyle}
|
||||
tabindex={props.disabled ? -1 : 0}
|
||||
onFocus={focus}
|
||||
onBlur={blur}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onMouseenter={this.onMouseEnter}
|
||||
onMouseleave={this.onMouseLeave}
|
||||
>
|
||||
<VcDatePicker {...vcDatePickerProps} />
|
||||
<VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
import { inject } from 'vue';
|
||||
import * as moment from 'moment';
|
||||
import Calendar from '../vc-calendar';
|
||||
import VcDatePicker from '../vc-calendar/src/Picker';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import {
|
||||
hasProp,
|
||||
getOptionProps,
|
||||
initDefaultProps,
|
||||
getComponent,
|
||||
getListeners,
|
||||
} from '../_util/props-util';
|
||||
import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
|
||||
import classNames from 'classnames';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { WeekPickerProps } from './interface';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
|
|
@ -21,24 +17,17 @@ function formatValue(value, format) {
|
|||
function noop() {}
|
||||
|
||||
export default {
|
||||
// static defaultProps = {
|
||||
// format: 'YYYY-wo',
|
||||
// allowClear: true,
|
||||
// };
|
||||
|
||||
// private input: any;
|
||||
name: 'AWeekPicker',
|
||||
mixins: [BaseMixin],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(WeekPickerProps(), {
|
||||
format: 'gggg-wo',
|
||||
allowClear: true,
|
||||
}),
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const value = this.value || this.defaultValue;
|
||||
|
|
@ -82,10 +71,13 @@ export default {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
saveInput(node) {
|
||||
this.input = node;
|
||||
},
|
||||
weekDateRender(current) {
|
||||
const selectedValue = this.$data._value;
|
||||
const { _prefixCls: prefixCls, $scopedSlots } = this;
|
||||
const dateRender = this.dateRender || $scopedSlots.dateRender;
|
||||
const { _prefixCls: prefixCls, $slots } = this;
|
||||
const dateRender = this.dateRender || $slots.dateRender;
|
||||
const dateNode = dateRender ? dateRender(current) : current.date();
|
||||
if (
|
||||
selectedValue &&
|
||||
|
|
@ -118,15 +110,15 @@ export default {
|
|||
this.handleChange(null);
|
||||
},
|
||||
focus() {
|
||||
this.$refs.input.focus();
|
||||
this.input.focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
this.$refs.input.blur();
|
||||
this.input.blur();
|
||||
},
|
||||
renderFooter(...args) {
|
||||
const { _prefixCls: prefixCls, $scopedSlots } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter;
|
||||
const { _prefixCls: prefixCls, $slots } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
return renderExtraFooter ? (
|
||||
<div class={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
|
||||
) : null;
|
||||
|
|
@ -134,7 +126,7 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
const props = getOptionProps(this);
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const {
|
||||
|
|
@ -150,22 +142,21 @@ export default {
|
|||
disabledDate,
|
||||
defaultPickerValue,
|
||||
$data,
|
||||
$scopedSlots,
|
||||
$slots,
|
||||
} = this;
|
||||
const listeners = getListeners(this);
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
this._prefixCls = prefixCls;
|
||||
|
||||
const { _value: pickerValue, _open: open } = $data;
|
||||
const { focus = noop, blur = noop } = listeners;
|
||||
const { class: className, style, id, onFocus = noop, onBlur = noop } = props;
|
||||
|
||||
if (pickerValue && localeCode) {
|
||||
pickerValue.locale(localeCode);
|
||||
}
|
||||
|
||||
const placeholder = hasProp(this, 'placeholder') ? this.placeholder : locale.lang.placeholder;
|
||||
const weekDateRender = this.dateRender || $scopedSlots.dateRender || this.weekDateRender;
|
||||
const weekDateRender = this.dateRender || $slots.dateRender || this.weekDateRender;
|
||||
const calendar = (
|
||||
<Calendar
|
||||
showWeekNumber
|
||||
|
|
@ -191,14 +182,14 @@ export default {
|
|||
return (
|
||||
<span style={{ display: 'inline-block', width: '100%' }}>
|
||||
<input
|
||||
ref="input"
|
||||
ref={this.saveInput}
|
||||
disabled={disabled}
|
||||
readonly
|
||||
value={(value && value.format(format)) || ''}
|
||||
placeholder={placeholder}
|
||||
class={pickerInputClass}
|
||||
onFocus={focus}
|
||||
onBlur={blur}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
{clearIcon}
|
||||
{inputIcon}
|
||||
|
|
@ -206,24 +197,18 @@ export default {
|
|||
);
|
||||
};
|
||||
const vcDatePickerProps = {
|
||||
props: {
|
||||
...props,
|
||||
calendar,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
value: pickerValue,
|
||||
open,
|
||||
},
|
||||
on: {
|
||||
...listeners,
|
||||
change: this.handleChange,
|
||||
openChange: this.handleOpenChange,
|
||||
},
|
||||
...props,
|
||||
calendar,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
value: pickerValue,
|
||||
open,
|
||||
onChange: this.handleChange,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
style: popupStyle,
|
||||
scopedSlots: { default: input, ...$scopedSlots },
|
||||
};
|
||||
return (
|
||||
<span class={pickerClass}>
|
||||
<VcDatePicker {...vcDatePickerProps} />
|
||||
<span class={classNames(className, pickerClass)} style={style} id={id}>
|
||||
<VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { inject } from 'vue';
|
||||
import * as moment from 'moment';
|
||||
import omit from 'lodash/omit';
|
||||
import MonthCalendar from '../vc-calendar/src/MonthCalendar';
|
||||
|
|
@ -12,10 +13,8 @@ import {
|
|||
hasProp,
|
||||
getOptionProps,
|
||||
initDefaultProps,
|
||||
mergeProps,
|
||||
getComponent,
|
||||
isValidElement,
|
||||
getListeners,
|
||||
} from '../_util/props-util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { formatDate } from './utils';
|
||||
|
|
@ -24,20 +23,18 @@ import { formatDate } from './utils';
|
|||
// value?: moment.Moment;
|
||||
// prefixCls: string;
|
||||
// }
|
||||
function noop() {}
|
||||
export default function createPicker(TheCalendar, props) {
|
||||
return {
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(props, {
|
||||
allowClear: true,
|
||||
showToday: true,
|
||||
}),
|
||||
mixins: [BaseMixin],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const value = this.value || this.defaultValue;
|
||||
|
|
@ -79,6 +76,9 @@ export default function createPicker(TheCalendar, props) {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
saveInput(node) {
|
||||
this.input = node;
|
||||
},
|
||||
clearSelection(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
@ -106,16 +106,15 @@ export default function createPicker(TheCalendar, props) {
|
|||
this.$emit('openChange', open);
|
||||
},
|
||||
focus() {
|
||||
this.$refs.input.focus();
|
||||
this.input.focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
this.$refs.input.blur();
|
||||
this.input.blur();
|
||||
},
|
||||
renderFooter(...args) {
|
||||
const { $scopedSlots, $slots, _prefixCls: prefixCls } = this;
|
||||
const renderExtraFooter =
|
||||
this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
|
||||
const { $slots, _prefixCls: prefixCls } = this;
|
||||
const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
|
||||
return renderExtraFooter ? (
|
||||
<div class={`${prefixCls}-footer-extra`}>
|
||||
{typeof renderExtraFooter === 'function'
|
||||
|
|
@ -133,22 +132,19 @@ export default function createPicker(TheCalendar, props) {
|
|||
},
|
||||
|
||||
render() {
|
||||
const { $scopedSlots } = this;
|
||||
const { $slots } = this;
|
||||
const { sValue: value, showDate, _open: open } = this.$data;
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const listeners = getListeners(this);
|
||||
const { panelChange = noop, focus = noop, blur = noop, ok = noop } = listeners;
|
||||
const props = getOptionProps(this);
|
||||
const props = omit({ ...getOptionProps(this), ...this.$attrs }, ['onChange']);
|
||||
|
||||
const { prefixCls: customizePrefixCls, locale, localeCode, inputReadOnly } = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
|
||||
this._prefixCls = prefixCls;
|
||||
|
||||
const dateRender = props.dateRender || $scopedSlots.dateRender;
|
||||
const monthCellContentRender =
|
||||
props.monthCellContentRender || $scopedSlots.monthCellContentRender;
|
||||
const dateRender = props.dateRender || $slots.dateRender;
|
||||
const monthCellContentRender = props.monthCellContentRender || $slots.monthCellContentRender;
|
||||
const placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
|
||||
|
||||
const disabledTime = props.showTime ? props.disabledTime : null;
|
||||
|
|
@ -162,45 +158,41 @@ export default function createPicker(TheCalendar, props) {
|
|||
value.locale(localeCode);
|
||||
}
|
||||
|
||||
const pickerProps = { props: {}, on: {} };
|
||||
const calendarProps = { props: {}, on: {} };
|
||||
const pickerProps = {};
|
||||
const calendarProps = {};
|
||||
const pickerStyle = {};
|
||||
if (props.showTime) {
|
||||
// fix https://github.com/ant-design/ant-design/issues/1902
|
||||
calendarProps.on.select = this.handleChange;
|
||||
calendarProps.onSelect = this.handleChange;
|
||||
pickerStyle.minWidth = '195px';
|
||||
} else {
|
||||
pickerProps.on.change = this.handleChange;
|
||||
pickerProps.onChange = this.handleChange;
|
||||
}
|
||||
if ('mode' in props) {
|
||||
calendarProps.props.mode = props.mode;
|
||||
calendarProps.mode = props.mode;
|
||||
}
|
||||
const theCalendarProps = mergeProps(calendarProps, {
|
||||
props: {
|
||||
disabledDate: props.disabledDate,
|
||||
disabledTime,
|
||||
locale: locale.lang,
|
||||
timePicker: props.timePicker,
|
||||
defaultValue: props.defaultPickerValue || interopDefault(moment)(),
|
||||
dateInputPlaceholder: placeholder,
|
||||
prefixCls,
|
||||
dateRender,
|
||||
format: props.format,
|
||||
showToday: props.showToday,
|
||||
monthCellContentRender,
|
||||
renderFooter: this.renderFooter,
|
||||
value: showDate,
|
||||
inputReadOnly,
|
||||
},
|
||||
on: {
|
||||
ok,
|
||||
panelChange,
|
||||
change: this.handleCalendarChange,
|
||||
},
|
||||
const theCalendarProps = {
|
||||
...calendarProps,
|
||||
disabledDate: props.disabledDate,
|
||||
disabledTime,
|
||||
locale: locale.lang,
|
||||
timePicker: props.timePicker,
|
||||
defaultValue: props.defaultPickerValue || interopDefault(moment)(),
|
||||
dateInputPlaceholder: placeholder,
|
||||
prefixCls,
|
||||
dateRender,
|
||||
format: props.format,
|
||||
showToday: props.showToday,
|
||||
monthCellContentRender,
|
||||
renderFooter: this.renderFooter,
|
||||
value: showDate,
|
||||
inputReadOnly,
|
||||
onOk: props.onOk,
|
||||
onPanelChange: props.onPanelChange,
|
||||
onChange: this.handleCalendarChange,
|
||||
class: calendarClassName,
|
||||
scopedSlots: $scopedSlots,
|
||||
});
|
||||
const calendar = <TheCalendar {...theCalendarProps} />;
|
||||
};
|
||||
const calendar = <TheCalendar {...theCalendarProps} vSlots={$slots} />;
|
||||
|
||||
const clearIcon =
|
||||
!props.disabled && props.allowClear && value ? (
|
||||
|
|
@ -219,10 +211,10 @@ export default function createPicker(TheCalendar, props) {
|
|||
const input = ({ value: inputValue }) => (
|
||||
<div>
|
||||
<input
|
||||
ref="input"
|
||||
ref={this.saveInput}
|
||||
disabled={props.disabled}
|
||||
onFocus={focus}
|
||||
onBlur={blur}
|
||||
onFocus={props.onFocus}
|
||||
onBlur={props.onBlur}
|
||||
readonly
|
||||
value={formatDate(inputValue, this.format)}
|
||||
placeholder={placeholder}
|
||||
|
|
@ -235,33 +227,28 @@ export default function createPicker(TheCalendar, props) {
|
|||
</div>
|
||||
);
|
||||
const vcDatePickerProps = {
|
||||
props: {
|
||||
...props,
|
||||
...pickerProps.props,
|
||||
calendar,
|
||||
value,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
},
|
||||
on: {
|
||||
...omit(listeners, 'change'),
|
||||
...pickerProps.on,
|
||||
open,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
},
|
||||
...props,
|
||||
...pickerProps,
|
||||
calendar,
|
||||
value,
|
||||
prefixCls: `${prefixCls}-picker-container`,
|
||||
open,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
style: props.popupStyle,
|
||||
scopedSlots: { default: input, ...$scopedSlots },
|
||||
children: input,
|
||||
};
|
||||
return (
|
||||
<span
|
||||
class={props.pickerClass}
|
||||
style={pickerStyle}
|
||||
id={props.id}
|
||||
class={classNames(props.class, props.pickerClass)}
|
||||
style={{ ...pickerStyle, ...props.style }}
|
||||
// tabindex={props.disabled ? -1 : 0}
|
||||
// onFocus={focus}
|
||||
// onBlur={blur}
|
||||
onMouseenter={this.onMouseEnter}
|
||||
onMouseleave={this.onMouseLeave}
|
||||
>
|
||||
<VcDatePicker {...vcDatePickerProps} />
|
||||
<VcDatePicker {...vcDatePickerProps} vSlots={omit($slots, ['default'])}></VcDatePicker>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import wrapPicker from './wrapPicker';
|
|||
import RangePicker from './RangePicker';
|
||||
import WeekPicker from './WeekPicker';
|
||||
import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface';
|
||||
import Base from '../base';
|
||||
|
||||
const DatePicker = wrapPicker(
|
||||
{ ...createPicker(VcCalendar, DatePickerProps()), name: 'ADatePicker' },
|
||||
|
|
@ -26,12 +25,11 @@ Object.assign(DatePicker, {
|
|||
});
|
||||
|
||||
/* istanbul ignore next */
|
||||
DatePicker.install = function(Vue) {
|
||||
Vue.use(Base);
|
||||
Vue.component(DatePicker.name, DatePicker);
|
||||
Vue.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
|
||||
Vue.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
|
||||
Vue.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker);
|
||||
DatePicker.install = function(app) {
|
||||
app.component(DatePicker.name, DatePicker);
|
||||
app.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
|
||||
app.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
|
||||
app.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker);
|
||||
};
|
||||
|
||||
export default DatePicker;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export const PickerProps = () => ({
|
|||
size: PropTypes.oneOf(['large', 'small', 'default']),
|
||||
getCalendarContainer: PropTypes.func,
|
||||
open: PropTypes.bool,
|
||||
// onOpenChange: PropTypes.(status: bool) => void,
|
||||
disabledDate: PropTypes.func,
|
||||
showToday: PropTypes.bool,
|
||||
dateRender: PropTypes.any, // (current: moment.Moment, today: moment.Moment) => React.ReactNode,
|
||||
|
|
@ -31,6 +30,12 @@ export const PickerProps = () => ({
|
|||
align: PropTypes.object.def(() => ({})),
|
||||
inputReadOnly: PropTypes.bool,
|
||||
valueFormat: PropTypes.string,
|
||||
onOpenChange: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
'onUpdate:value': PropTypes.func,
|
||||
onMouseenter: PropTypes.func,
|
||||
onMouseleave: PropTypes.func,
|
||||
});
|
||||
|
||||
export const SinglePickerProps = () => ({
|
||||
|
|
@ -39,7 +44,7 @@ export const SinglePickerProps = () => ({
|
|||
defaultPickerValue: TimeType,
|
||||
renderExtraFooter: PropTypes.any,
|
||||
placeholder: PropTypes.string,
|
||||
// onChange?: (date: moment.Moment, dateString: string) => void;
|
||||
onChange: PropTypes.func,
|
||||
});
|
||||
|
||||
export const DatePickerProps = () => ({
|
||||
|
|
@ -48,9 +53,10 @@ export const DatePickerProps = () => ({
|
|||
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
||||
open: PropTypes.bool,
|
||||
disabledTime: PropTypes.func,
|
||||
// onOpenChange?: (status: bool) => void;
|
||||
// onOk?: (selectedTime: moment.Moment) => void;
|
||||
mode: PropTypes.oneOf(['time', 'date', 'month', 'year']),
|
||||
onOpenChange: PropTypes.func,
|
||||
onPanelChange: PropTypes.func,
|
||||
onOk: PropTypes.func,
|
||||
});
|
||||
|
||||
export const MonthPickerProps = () => ({
|
||||
|
|
@ -68,9 +74,6 @@ export const RangePickerProps = () => ({
|
|||
defaultValue: TimesType,
|
||||
defaultPickerValue: TimesType,
|
||||
timePicker: PropTypes.any,
|
||||
// onChange?: (dates: TimesType, dateStrings: [string, string]) => void;
|
||||
// onCalendarChange?: (dates: TimesType, dateStrings: [string, string]) => void;
|
||||
// onOk?: (selectedTime: moment.Moment) => void;
|
||||
showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
||||
ranges: PropTypes.object,
|
||||
placeholder: PropTypes.arrayOf(String),
|
||||
|
|
@ -79,7 +82,12 @@ export const RangePickerProps = () => ({
|
|||
disabledTime: PropTypes.func,
|
||||
showToday: PropTypes.bool,
|
||||
renderExtraFooter: PropTypes.any,
|
||||
// onPanelChange?: (value?: TimesType, mode?: string | string[]) => void;
|
||||
onChange: PropTypes.func,
|
||||
onCalendarChange: PropTypes.func,
|
||||
onOk: PropTypes.func,
|
||||
onPanelChange: PropTypes.func,
|
||||
onMouseenter: PropTypes.func,
|
||||
onMouseleave: PropTypes.func,
|
||||
});
|
||||
|
||||
export const WeekPickerProps = () => ({
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { provide, inject } from 'vue';
|
||||
import TimePickerPanel from '../vc-time-picker/Panel';
|
||||
import classNames from 'classnames';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { generateShowHourMinuteSecond } from '../time-picker';
|
||||
import enUS from './locale/en_US';
|
||||
import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
|
||||
import { getOptionProps, initDefaultProps } from '../_util/props-util';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
|
||||
|
||||
|
|
@ -41,23 +42,24 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
|||
export default function wrapPicker(Picker, props, pickerType) {
|
||||
return {
|
||||
name: Picker.name,
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(props, {
|
||||
transitionName: 'slide-up',
|
||||
popupStyle: {},
|
||||
locale: {},
|
||||
}),
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
},
|
||||
provide() {
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
setup() {
|
||||
return {
|
||||
savePopupRef: this.savePopupRef,
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
provide('savePopupRef', this.savePopupRef);
|
||||
},
|
||||
mounted() {
|
||||
const { autofocus, disabled, value, defaultValue, valueFormat } = this;
|
||||
checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
|
||||
|
|
@ -74,6 +76,9 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
savePicker(node) {
|
||||
this.picker = node;
|
||||
},
|
||||
getDefaultLocale() {
|
||||
const result = {
|
||||
...enUS,
|
||||
|
|
@ -109,11 +114,9 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
this.$emit('mouseleave', e);
|
||||
},
|
||||
handleChange(date, dateString) {
|
||||
this.$emit(
|
||||
'change',
|
||||
this.valueFormat ? momentToString(date, this.valueFormat) : date,
|
||||
dateString,
|
||||
);
|
||||
const value = this.valueFormat ? momentToString(date, this.valueFormat) : date;
|
||||
this.$emit('update:value', value);
|
||||
this.$emit('change', value, dateString);
|
||||
},
|
||||
handleOk(val) {
|
||||
this.$emit('ok', this.valueFormat ? momentToString(val, this.valueFormat) : val);
|
||||
|
|
@ -126,11 +129,11 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
);
|
||||
},
|
||||
focus() {
|
||||
this.$refs.picker.focus();
|
||||
this.picker.focus();
|
||||
},
|
||||
|
||||
blur() {
|
||||
this.$refs.picker.blur();
|
||||
this.picker.blur();
|
||||
},
|
||||
|
||||
transformValue(props) {
|
||||
|
|
@ -146,7 +149,7 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
},
|
||||
|
||||
renderPicker(locale, localeCode) {
|
||||
const props = getOptionProps(this);
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
this.transformValue(props);
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
|
|
@ -186,54 +189,35 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
const columns = getColumns(vcTimePickerProps);
|
||||
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
|
||||
const timePickerPanelProps = {
|
||||
props: {
|
||||
...vcTimePickerProps,
|
||||
...showTime,
|
||||
prefixCls: `${prefixCls}-time-picker`,
|
||||
placeholder: locale.timePickerLocale.placeholder,
|
||||
transitionName: 'slide-up',
|
||||
},
|
||||
...vcTimePickerProps,
|
||||
...showTime,
|
||||
prefixCls: `${prefixCls}-time-picker`,
|
||||
placeholder: locale.timePickerLocale.placeholder,
|
||||
transitionName: 'slide-up',
|
||||
class: timePickerCls,
|
||||
on: {
|
||||
esc: () => {},
|
||||
},
|
||||
onEsc: () => {},
|
||||
};
|
||||
const timePicker = showTime ? <TimePickerPanel {...timePickerPanelProps} /> : null;
|
||||
const pickerProps = {
|
||||
props: {
|
||||
...props,
|
||||
getCalendarContainer: getPopupContainer,
|
||||
format: mergedFormat,
|
||||
pickerClass,
|
||||
pickerInputClass,
|
||||
locale,
|
||||
localeCode,
|
||||
timePicker,
|
||||
},
|
||||
on: {
|
||||
...getListeners(this),
|
||||
openChange: this.handleOpenChange,
|
||||
focus: this.handleFocus,
|
||||
blur: this.handleBlur,
|
||||
mouseenter: this.handleMouseEnter,
|
||||
mouseleave: this.handleMouseLeave,
|
||||
change: this.handleChange,
|
||||
ok: this.handleOk,
|
||||
calendarChange: this.handleCalendarChange,
|
||||
},
|
||||
ref: 'picker',
|
||||
scopedSlots: this.$scopedSlots || {},
|
||||
...props,
|
||||
getCalendarContainer: getPopupContainer,
|
||||
format: mergedFormat,
|
||||
pickerClass,
|
||||
pickerInputClass,
|
||||
locale,
|
||||
localeCode,
|
||||
timePicker,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
onFocus: this.handleFocus,
|
||||
onBlur: this.handleBlur,
|
||||
onMouseenter: this.handleMouseEnter,
|
||||
onMouseleave: this.handleMouseLeave,
|
||||
onChange: this.handleChange,
|
||||
onOk: this.handleOk,
|
||||
onCalendarChange: this.handleCalendarChange,
|
||||
ref: this.savePicker,
|
||||
};
|
||||
return (
|
||||
<Picker {...pickerProps}>
|
||||
{this.$slots &&
|
||||
Object.keys(this.$slots).map(key => (
|
||||
<template slot={key} key={key}>
|
||||
{this.$slots[key]}
|
||||
</template>
|
||||
))}
|
||||
</Picker>
|
||||
);
|
||||
return <Picker {...pickerProps} vSlots={this.$slots} />;
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -242,7 +226,7 @@ export default function wrapPicker(Picker, props, pickerType) {
|
|||
<LocaleReceiver
|
||||
componentName="DatePicker"
|
||||
defaultLocale={this.getDefaultLocale}
|
||||
scopedSlots={{ default: this.renderPicker }}
|
||||
children={this.renderPicker}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ const Calendar = {
|
|||
focusablePanel: PropTypes.bool.def(true),
|
||||
inputMode: PropTypes.string,
|
||||
inputReadOnly: PropTypes.bool,
|
||||
monthCellRender: PropTypes.func,
|
||||
monthCellContentRender: PropTypes.func,
|
||||
},
|
||||
|
||||
mixins: [BaseMixin, CommonMixin, CalendarMixin],
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ const Picker = {
|
|||
|
||||
data() {
|
||||
const props = this.$props;
|
||||
this.calendarElement = null;
|
||||
this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
|
||||
let open;
|
||||
if (hasProp(this, 'open')) {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const CalendarFooter = {
|
|||
if (showToday) {
|
||||
nowEl = <TodayButton key="todayButton" {...btnProps} />;
|
||||
}
|
||||
delete btnProps.props.value;
|
||||
delete btnProps.value;
|
||||
let okBtn = null;
|
||||
if (showOk === true || (showOk !== false && !!timePicker)) {
|
||||
okBtn = <OkButton key="okButton" {...btnProps} />;
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ const DateInput = {
|
|||
clearIcon: PropTypes.any,
|
||||
inputMode: PropTypes.string,
|
||||
inputReadOnly: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
showClear: PropTypes.bool,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import PropTypes from '../../../_util/vue-types';
|
||||
import BaseMixin from '../../../_util/BaseMixin';
|
||||
import { hasProp, getListeners } from '../../../_util/props-util';
|
||||
import { hasProp } from '../../../_util/props-util';
|
||||
import MonthTable from './MonthTable';
|
||||
|
||||
function goYear(direction) {
|
||||
|
|
@ -86,7 +86,7 @@ const MonthPanel = {
|
|||
<a
|
||||
class={`${prefixCls}-year-select`}
|
||||
role="button"
|
||||
onClick={getListeners(this).yearPanelShow || noop}
|
||||
onClick={this.$attrs.onYearPanelShow || noop}
|
||||
title={locale.yearSelect}
|
||||
>
|
||||
<span class={`${prefixCls}-year-select-content`}>{year}</span>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import demo from '../antdv-demo/docs/calendar/demo/basic';
|
||||
import demo from '../antdv-demo/docs/date-picker/demo/basic';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import {
|
|||
Carousel,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
DatePicker,
|
||||
notification,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
|
|
@ -87,4 +88,5 @@ app
|
|||
.use(Carousel)
|
||||
.use(TimePicker)
|
||||
.use(Calendar)
|
||||
.use(DatePicker)
|
||||
.mount('#app');
|
||||
|
|
|
|||
Loading…
Reference in New Issue