github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update date-picker

pull/309/head
tangjinzhou 2018-12-08 16:47:05 +08:00
parent d98abf4b11
commit 3fb4067d1a
14 changed files with 291 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/date-picker/RangePicker.jsx
View File

@ -8,8 +8,9 @@ import Icon from '../icon'
import Tag from '../tag' import Tag from '../tag'
import interopDefault from '../_util/interopDefault' import interopDefault from '../_util/interopDefault'
import { RangePickerProps } from './interface' import { RangePickerProps } from './interface'
import { hasProp, getOptionProps, initDefaultProps, mergeProps } from '../_util/props-util' import { hasProp, getOptionProps, initDefaultProps, mergeProps, getComponentFromProp, isValidElement } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode'
function noop () {} function noop () {}
function getShowDateFromValue (value) { function getShowDateFromValue (value) {
const [start, end] = value const [start, end] = value
@ -130,6 +131,7 @@ export default {
formatValue(value[0], this.format), formatValue(value[0], this.format),
formatValue(value[1], this.format), formatValue(value[1], this.format),
]) ])
this.focus()
}, },
handleOpenChange (open) { handleOpenChange (open) {
@ -174,6 +176,7 @@ export default {
this.setValue(value, true) this.setValue(value, true)
this.$emit('ok', value) this.$emit('ok', value)
this.$emit('openChange', false)
}, },
setValue (value, hidePanel) { setValue (value, hidePanel) {
@ -224,17 +227,18 @@ export default {
</Tag> </Tag>
) )
}) })
const rangeNode = ( const rangeNode = (operations && operations.length > 0) ? (
<div class={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key='range'> <div class={`${prefixCls}-footer-extra ${prefixCls}-range-quick-selector`} key='range'>
{operations} {operations}
</div> </div>) : null
)
return [rangeNode, customFooter] return [rangeNode, customFooter]
}, },
}, },
render () { render () {
const props = getOptionProps(this) const props = getOptionProps(this)
let suffixIcon = getComponentFromProp(this, 'suffixIcon')
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
const { sValue: value, sShowDate: showDate, sHoverValue: hoverValue, sOpen: open, $listeners, $scopedSlots } = this const { sValue: value, sShowDate: showDate, sHoverValue: hoverValue, sOpen: open, $listeners, $scopedSlots } = this
const { calendarChange = noop, ok = noop, focus = noop, blur = noop, panelChange = noop } = $listeners const { calendarChange = noop, ok = noop, focus = noop, blur = noop, panelChange = noop } = $listeners
const { const {
@ -296,7 +300,7 @@ export default {
ok: ok, ok: ok,
valueChange: this.handleShowDateChange, valueChange: this.handleShowDateChange,
hoverChange: this.handleHoverChange, hoverChange: this.handleHoverChange,
panelChange: panelChange, panelChange,
inputSelect: this.handleCalendarInputSelect, inputSelect: this.handleCalendarInputSelect,
}, },
class: calendarClassName, class: calendarClassName,
@ -316,12 +320,24 @@ export default {
const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? ( const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? (
<Icon <Icon
type='cross-circle' type='close-circle'
class={`${prefixCls}-picker-clear`} class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection} onClick={this.clearSelection}
theme='filled'
/> />
) : null ) : null
const inputIcon = suffixIcon && (
isValidElement(suffixIcon)
? cloneElement(
suffixIcon,
{
class: `${prefixCls}-picker-icon`,
},
) : <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>) || (
<Icon type='calendar' class={`${prefixCls}-picker-icon`} />
)
const input = ({ value: inputValue }) => { const input = ({ value: inputValue }) => {
const start = inputValue[0] const start = inputValue[0]
const end = inputValue[1] const end = inputValue[1]
@ -345,7 +361,7 @@ export default {
tabIndex={-1} tabIndex={-1}
/> />
{clearIcon} {clearIcon}
<span class={`${prefixCls}-picker-icon`} /> {inputIcon}
</span> </span>
) )
} }

23
components/date-picker/WeekPicker.jsx
View File

@ -3,10 +3,11 @@ import * as moment from 'moment'
import Calendar from '../vc-calendar' import Calendar from '../vc-calendar'
import VcDatePicker from '../vc-calendar/src/Picker' import VcDatePicker from '../vc-calendar/src/Picker'
import Icon from '../icon' import Icon from '../icon'
import { hasProp, getOptionProps, initDefaultProps } from '../_util/props-util' import { hasProp, getOptionProps, initDefaultProps, getComponentFromProp, isValidElement } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { WeekPickerProps } from './interface' import { WeekPickerProps } from './interface'
import interopDefault from '../_util/interopDefault' import interopDefault from '../_util/interopDefault'
import { cloneElement } from '../_util/vnode'
function formatValue (value, format) { function formatValue (value, format) {
return (value && value.format(format)) || '' return (value && value.format(format)) || ''
@ -74,6 +75,7 @@ export default {
this.setState({ sValue: value }) this.setState({ sValue: value })
} }
this.$emit('change', value, formatValue(value, this.format)) this.$emit('change', value, formatValue(value, this.format))
this.focus()
}, },
clearSelection (e) { clearSelection (e) {
e.preventDefault() e.preventDefault()
@ -92,6 +94,8 @@ export default {
render () { render () {
const props = getOptionProps(this) const props = getOptionProps(this)
let suffixIcon = getComponentFromProp(this, 'suffixIcon')
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
const { const {
prefixCls, disabled, pickerClass, popupStyle, prefixCls, disabled, pickerClass, popupStyle,
pickerInputClass, format, allowClear, locale, localeCode, disabledDate, pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
@ -119,11 +123,24 @@ export default {
) )
const clearIcon = (!disabled && allowClear && this.sValue) ? ( const clearIcon = (!disabled && allowClear && this.sValue) ? (
<Icon <Icon
type='cross-circle' type='close-circle'
class={`${prefixCls}-picker-clear`} class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection} onClick={this.clearSelection}
theme='filled'
/> />
) : null ) : null
const inputIcon = suffixIcon && (
isValidElement(suffixIcon)
? cloneElement(
suffixIcon,
{
class: `${prefixCls}-picker-icon`,
},
) : <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>) || (
<Icon type='calendar' class={`${prefixCls}-picker-icon`} />
)
const input = ({ value }) => { const input = ({ value }) => {
return ( return (
<span> <span>
@ -138,7 +155,7 @@ export default {
onBlur={blur} onBlur={blur}
/> />
{clearIcon} {clearIcon}
<span class={`${prefixCls}-picker-icon`} /> {inputIcon}
</span> </span>
) )
} }

18
components/date-picker/__tests__/MonthPicker.test.js
View File

@ -1,8 +1,26 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import moment from 'moment'
import DatePicker from '..' import DatePicker from '..'
import focusTest from '../../../tests/shared/focusTest' import focusTest from '../../../tests/shared/focusTest'
import { openPanel, $$ } from './utils'
const { MonthPicker } = DatePicker const { MonthPicker } = DatePicker
describe('MonthPicker', () => { describe('MonthPicker', () => {
focusTest(MonthPicker) focusTest(MonthPicker)
it('reset select item when popup close', async () => {
const wrapper = mount(MonthPicker, {
propsData: { value: moment('2018-07-01') },
sync: false,
attachToDocument: true,
})
await asyncExpect(() => {
openPanel(wrapper)
})
await asyncExpect(() => {
$$('.ant-calendar-month-panel-month')[0].click()
$$('.ant-calendar-month-panel-cell')[6].getAttribute('class').split(' ').includes('ant-calendar-month-panel-selected-cell')
}, 0)
})
}) })

22
components/date-picker/__tests__/RangePicker.test.js
View File

@ -325,4 +325,26 @@ describe('RangePicker', () => {
}).not.toThrow() }).not.toThrow()
}) })
}) })
// https://github.com/ant-design/ant-design/issues/11631
it('triggers onOpenChange when click on preset range', async () => {
const handleOpenChange = jest.fn()
const range = [moment().subtract(2, 'd'), moment()]
const wrapper = mount({
render () {
return <RangePicker onOpenChange={handleOpenChange} ranges={{ 'recent two days': range }} />
},
}, {
sync: false,
attachToDocument: true,
})
await asyncExpect(() => {
wrapper.find('.ant-calendar-picker-input').trigger('click')
})
await asyncExpect(() => {
$$('.ant-calendar-range-quick-selector .ant-tag')[0].click()
}, 0)
await asyncExpect(() => {
expect(handleOpenChange).toBeCalledWith(false)
})
})
}) })

85
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,30 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`; exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`; <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input disabled="disabled" readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-disabled"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input disabled="disabled" readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-disabled"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="-1" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-input-disabled"><input disabled="disabled" readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input disabled="disabled" readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`;
exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`;
exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span></div>`;
exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle"><!----></i><span class="ant-calendar-picker-icon"></span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle"><!----></i><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle">
<!----></i><span class="ant-calendar-picker-icon"></span></span></span></div>
`; `;
exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `<div><span class="ant-calendar-picker" mode="time"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start month" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End month" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`; exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `<div><span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`; exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input disabled="disabled" readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-disabled"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input disabled="disabled" readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input ant-input-disabled"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="-1" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-input-disabled"><input disabled="disabled" readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input disabled="disabled" readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] = `
<div><span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></div>
`;
exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
</svg></i><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
<div><span class="ant-calendar-picker" style="width: 195px;" mode="time"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start month" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End month" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
<div><span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;
exports[`renders ./components/date-picker/demo/size.md correctly 1`] = ` exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span> <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select Month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker ant-calendar-picker-default"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
</div></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select Month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker ant-calendar-picker-default"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><span class=""><input readonly="true" placeholder="Select Week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span></div> <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><span class=""><input readonly="true" placeholder="Select Week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>
</div>
`; `;
exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Start" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="End" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span></div>`; exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `<div><span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Start" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="End" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></div>`;
exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select Time" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start Time" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End Time" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></div>`; exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
<div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path>
</svg></i></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon">ab</span></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></span></span></div>
`;
exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
<div><span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Select Time" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start Time" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End Time" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
</svg></i></span></span></div>
`;

60
components/date-picker/createPicker.js
View File

@ -7,7 +7,8 @@ import classNames from 'classnames'
import Icon from '../icon' import Icon from '../icon'
import interopDefault from '../_util/interopDefault' import interopDefault from '../_util/interopDefault'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { hasProp, getOptionProps, initDefaultProps, mergeProps } from '../_util/props-util' import { hasProp, getOptionProps, initDefaultProps, mergeProps, getComponentFromProp, isValidElement } from '../_util/props-util'
import { cloneElement } from '../_util/vnode'
// export const PickerProps = { // export const PickerProps = {
// value?: moment.Moment; // value?: moment.Moment;
@ -44,14 +45,26 @@ export default function createPicker (TheCalendar, props) {
return { return {
sValue: value, sValue: value,
showDate: value, showDate: value,
_open: !!this.open,
} }
}, },
watch: { watch: {
open (val) {
const props = getOptionProps(this)
const state = {}
state._open = val
if ('value' in props && !val && props.value !== this.showDate) {
state.showDate = props.value
}
this.setState(state)
},
value (val) { value (val) {
this.setState({ const state = {}
sValue: val, state.sValue = val
showDate: val, if (val !== this.sValue) {
}) state.showDate = val
}
this.setState(state)
}, },
}, },
methods: { methods: {
@ -79,12 +92,19 @@ export default function createPicker (TheCalendar, props) {
}) })
} }
this.$emit('change', value, (value && value.format(this.format)) || '') this.$emit('change', value, (value && value.format(this.format)) || '')
this.focus()
}, },
handleCalendarChange (value) { handleCalendarChange (value) {
this.setState({ showDate: value }) this.setState({ showDate: value })
}, },
handleOpenChange (open) {
const props = getOptionProps(this)
if (!('open' in props)) {
this.setState({ _open: open })
}
this.$emit('openChange', open)
},
focus () { focus () {
this.$refs.input.focus() this.$refs.input.focus()
}, },
@ -101,7 +121,10 @@ export default function createPicker (TheCalendar, props) {
}, },
render () { render () {
const { sValue: value, showDate, $listeners, $scopedSlots } = this const { $listeners, $scopedSlots } = this
const { sValue: value, showDate, _open: open } = this.$data
let suffixIcon = getComponentFromProp(this, 'suffixIcon')
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
const { panelChange = noop, focus = noop, blur = noop, ok = noop } = $listeners const { panelChange = noop, focus = noop, blur = noop, ok = noop } = $listeners
const props = getOptionProps(this) const props = getOptionProps(this)
const { prefixCls, locale, localeCode } = props const { prefixCls, locale, localeCode } = props
@ -123,9 +146,11 @@ export default function createPicker (TheCalendar, props) {
const pickerProps = { props: {}, on: {}} const pickerProps = { props: {}, on: {}}
const calendarProps = { props: {}, on: {}} const calendarProps = { props: {}, on: {}}
const pickerStyle = {}
if (props.showTime) { if (props.showTime) {
// fix https://github.com/ant-design/ant-design/issues/1902 // fix https://github.com/ant-design/ant-design/issues/1902
calendarProps.on.select = this.handleChange calendarProps.on.select = this.handleChange
pickerStyle.width = '195px'
} else { } else {
pickerProps.on.change = this.handleChange pickerProps.on.change = this.handleChange
} }
@ -150,7 +175,7 @@ export default function createPicker (TheCalendar, props) {
}, },
on: { on: {
ok: ok, ok: ok,
panelChange: panelChange, panelChange,
change: this.handleCalendarChange, change: this.handleCalendarChange,
}, },
class: calendarClassName, class: calendarClassName,
@ -164,12 +189,24 @@ export default function createPicker (TheCalendar, props) {
const clearIcon = (!props.disabled && props.allowClear && value) ? ( const clearIcon = (!props.disabled && props.allowClear && value) ? (
<Icon <Icon
type='cross-circle' type='close-circle'
class={`${prefixCls}-picker-clear`} class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection} onClick={this.clearSelection}
theme='filled'
/> />
) : null ) : null
const inputIcon = suffixIcon && (
isValidElement(suffixIcon)
? cloneElement(
suffixIcon,
{
class: `${prefixCls}-picker-icon`,
},
) : <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>) || (
<Icon type='calendar' class={`${prefixCls}-picker-icon`} />
)
const input = ({ value: inputValue }) => ( const input = ({ value: inputValue }) => (
<div> <div>
<input <input
@ -183,7 +220,7 @@ export default function createPicker (TheCalendar, props) {
class={props.pickerInputClass} class={props.pickerInputClass}
/> />
{clearIcon} {clearIcon}
<span class={`${prefixCls}-picker-icon`} /> {inputIcon}
</div> </div>
) )
const vcDatePickerProps = { const vcDatePickerProps = {
@ -197,12 +234,15 @@ export default function createPicker (TheCalendar, props) {
on: { on: {
...omit($listeners, 'change'), ...omit($listeners, 'change'),
...pickerProps.on, ...pickerProps.on,
open,
onOpenChange: this.handleOpenChange,
}, },
style: props.popupStyle, style: props.popupStyle,
} }
return ( return (
<span <span
class={props.pickerClass} class={props.pickerClass}
style={pickerStyle}
// tabIndex={props.disabled ? -1 : 0} // tabIndex={props.disabled ? -1 : 0}
// onFocus={focus} // onFocus={focus}
// onBlur={blur} // onBlur={blur}

4
components/date-picker/demo/index.vue
View File

@ -10,6 +10,7 @@ import PresettedRanges from './presetted-ranges'
import Size from './size' import Size from './size'
import StartEnd from './start-end' import StartEnd from './start-end'
import Time from './time' import Time from './time'
import Suffix from './suffix'
import CN from '../index.zh-CN.md' import CN from '../index.zh-CN.md'
import US from '../index.en-US.md' import US from '../index.en-US.md'
const md = { const md = {
@ -28,6 +29,7 @@ By clicking the input box, you can select a date from a popup calendar.
export default { export default {
category: 'Components', category: 'Components',
type: 'Data Entry', type: 'Data Entry',
zhType: '数据录入',
title: 'DatePicker', title: 'DatePicker',
subtitle: '日期选择框', subtitle: '日期选择框',
render () { render () {
@ -45,7 +47,7 @@ export default {
<Size/> <Size/>
<StartEnd/> <StartEnd/>
<Time/> <Time/>
<Suffix />
<api> <api>
<CN slot='cn' /> <CN slot='cn' />
<US/> <US/>

51
components/date-picker/demo/suffix.md Normal file
View File

@ -0,0 +1,51 @@
<cn>
#### 后缀图标
最简单的用法，在浮层中可以选择或者输入日期。
</cn>
<us>
#### Suffix
Basic use case. Users can select or input a date in panel.
</us>
```html
<template>
<div>
<a-date-picker @change="onChange">
<a-icon slot="suffixIcon" type="smile" />
</a-date-picker>
<br />
<a-month-picker @change="onChange" placeholder="Select month">
<a-icon slot="suffixIcon" type="smile" />
</a-month-picker>
<br />
<a-range-picker @change="onChange">
<a-icon slot="suffixIcon" type="smile" />
</a-range-picker>
<br />
<a-week-picker @change="onChange" placeholder="Select week">
<a-icon slot="suffixIcon" type="smile" />
</a-week-picker>
<br />
<a-date-picker suffixIcon="ab" @change="onChange" />
<br />
<a-month-picker suffixIcon="ab" @change="onChange" placeholder="Select month" />
<br />
<a-range-picker suffixIcon="ab" @change="onChange" />
<br />
<a-week-picker suffixIcon="ab" @change="onChange" placeholder="Select week" />
</div>
</template>
<script>
export default {
methods: {
onChange(date, dateString) {
console.log(date, dateString);
}
}
}
</script>
```

6
components/date-picker/index.en-US.md
View File

@ -37,11 +37,14 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
| popupStyle | to customize the style of the popup calendar | object | {} | | popupStyle | to customize the style of the popup calendar | object | {} |
| dropdownClassName | to customize the className of the popup calendar | string | - | | dropdownClassName | to customize the className of the popup calendar | string | - |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - | | size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
| suffixIcon | The custom suffix icon | VNode \| slot | - |
### Common Events ### Common Events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| openChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | | openChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) |
| panelChange | callback when picker panel mode is changed | function(value, mode) |
### Common Methods ### Common Methods
@ -105,7 +108,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - | | disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" | | format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
| ranges | preseted ranges for quick selection | { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } | - | | ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - | | renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker/#API) | | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker/#API) |
| 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()] | | 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()] |
@ -114,6 +117,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
### RangePicker Events ### RangePicker Events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| calendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
| change | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | | change | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
| ok | callback when click ok button | function() | | ok | callback when click ok button | function() |

10
components/date-picker/index.zh-CN.md
View File

@ -12,9 +12,9 @@
````html ````html
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
// import moment from 'moment'; import moment from 'moment';
// import 'moment/locale/zh-cn'; import 'moment/locale/zh-cn';
// moment.locale('zh-cn'); moment.locale('zh-cn');
<a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')" /> <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')" />
```` ````
@ -37,12 +37,14 @@
| popupStyle | 额外的弹出日历样式 | object | {} | | popupStyle | 额外的弹出日历样式 | object | {} |
| dropdownClassName | 额外的弹出日历 className | string | - | | dropdownClassName | 额外的弹出日历 className | string | - |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 | | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - |
### 共有的事件 ### 共有的事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | | --- | --- | --- |
| openChange | 弹出日历和关闭日历的回调 | function(status) | | openChange | 弹出日历和关闭日历的回调 | function(status) |
| panelChange | 日期面板变化时的回调 | function(value, mode) | - |
### 共同的方法 ### 共同的方法
@ -108,7 +110,7 @@
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | | defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 | | disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
| ranges       | 预设时间范围快捷选择 | { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]&#x3A; [moment](http://momentjs.com/)\[] } | 无 | | ranges       | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 |
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - | | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) | | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] | | showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |

1
components/date-picker/interface.js
View File

@ -16,6 +16,7 @@ export const PickerProps = () => ({
format: PropTypes.string, format: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
allowClear: PropTypes.bool, allowClear: PropTypes.bool,
suffixIcon: PropTypes.any,
popupStyle: PropTypes.object, popupStyle: PropTypes.object,
dropdownClassName: PropTypes.string, dropdownClassName: PropTypes.string,
locale: PropTypes.any, locale: PropTypes.any,

19
components/date-picker/locale/mn_MN.js Normal file
View File

@ -0,0 +1,19 @@
import CalendarLocale from '../../vc-calendar/src/locale/mn_MN'
import TimePickerLocale from '../../time-picker/locale/mn_MN'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Огноо сонгох',
rangePlaceholder: ['Эхлэх огноо', 'Дуусах огноо'],
...CalendarLocale,
},
timePickerLocale: {
...TimePickerLocale,
},
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
export default locale

4
components/date-picker/locale/vi_VN.js
View File

@ -1,5 +1,5 @@
import CalendarLocale from '../../vc-calendar/src/locale/en_US' import CalendarLocale from '../../vc-calendar/src/locale/vi_VN'
import TimePickerLocale from '../../time-picker/locale/en_US' import TimePickerLocale from '../../time-picker/locale/vi_VN'
// Merge into a locale object // Merge into a locale object
const locale = { const locale = {

9
components/date-picker/wrapPicker.js
View File

@ -1,4 +1,3 @@
import TimePickerPanel from '../vc-time-picker/Panel' import TimePickerPanel from '../vc-time-picker/Panel'
import classNames from 'classnames' import classNames from 'classnames'
import LocaleReceiver from '../locale-provider/LocaleReceiver' import LocaleReceiver from '../locale-provider/LocaleReceiver'
@ -147,9 +146,11 @@ export default function wrapPicker (Picker, props, defaultFormat) {
<Picker <Picker
{...pickerProps} {...pickerProps}
> >
<template slot='renderExtraFooter'> {this.$slots && Object.keys(this.$slots).map(key => (
{this.$slots.renderExtraFooter} <template slot={key} key={key}>
</template> {this.$slots[key]}
</template>
))}
</Picker> </Picker>
) )
}, },