1404/11/04- first
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
import button from './src/button.vue'
|
||||
export default button
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<AButton :type="props.type" :size="props.size" :class="[prefixCls, _class]">
|
||||
<!-- py-1 px-2-->
|
||||
<div
|
||||
class="flex items-center gap-1 justify-center flex-row-reverse gap-2 py-1 px-2"
|
||||
:class="[{ 'flex-row-reverse': suffixIcon }]"
|
||||
>
|
||||
<slot v-if="$slots.default"></slot>
|
||||
|
||||
<BaseIcon :size="iconSize" :icon="icon" v-if="icon" :class="iconClass" />
|
||||
</div>
|
||||
</AButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { computed } from 'vue'
|
||||
import { baseButtonIconSize } from '@root/config'
|
||||
|
||||
interface Props {
|
||||
icon?: string
|
||||
iconSize?: string
|
||||
iconClass?: string
|
||||
suffixIcon?: boolean
|
||||
type?: string
|
||||
size?: string
|
||||
// prefixIcon?: string
|
||||
}
|
||||
|
||||
const slot = useSlots()
|
||||
|
||||
const _class = computed(() => {
|
||||
if (!slot.default) {
|
||||
// return '!px-1 !py-1'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const { prefixCls } = usePrefix('base-button')
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
iconSize: baseButtonIconSize,
|
||||
// iconLeft: false,
|
||||
iconClass: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix:~'@{prefixCls}-base-button';
|
||||
.@{prefix}{
|
||||
//width: fit-content;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
/*padding: 8px;*/
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
import BaseCard from './src/BaseCard.vue'
|
||||
export default BaseCard
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<ACard class="rounded-lg">
|
||||
<slot></slot>
|
||||
</ACard>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,2 @@
|
||||
import BaseDatePicker from './src/BaseDatePicker.vue'
|
||||
export default BaseDatePicker
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<DatePicker :locale="locale" v-model:value="_date" :size="props.size" v-bind="_attrs" inputReadOnly/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DatePicker from './datePick'
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/fa_IR'
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import { omit } from 'lodash'
|
||||
|
||||
interface Props {
|
||||
value?: string | Dayjs
|
||||
size?: string
|
||||
format?: string
|
||||
}
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const _attrs = computed(() => {
|
||||
//console.log('dsfsdfsdf', attrs)
|
||||
return omit(attrs, 'value')
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: '',
|
||||
format: 'YYYY/MM/DD'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', val: string | null): void,
|
||||
(e: 'onchange', val: string | null): void,
|
||||
}>()
|
||||
|
||||
const _date = computed({
|
||||
set: (val) => {
|
||||
let temp: string | null = null
|
||||
if (val) {
|
||||
temp = val.calendar('gregory').locale('en').format(props.format)
|
||||
}
|
||||
emit('update:value', temp)
|
||||
emit('onchange', temp)
|
||||
},
|
||||
get: () => {
|
||||
if (typeof props.value == 'string') {
|
||||
return props.value ? dayjs(props.value) : null
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
import dayjs from 'dayjs'
|
||||
import updateLocale from 'dayjs/plugin/updateLocale'
|
||||
import jalaliday from 'jalaliday'
|
||||
dayjs.extend(jalaliday)
|
||||
dayjs.extend(updateLocale)
|
||||
dayjs.calendar('jalali') // Jalali Calendar
|
||||
const months = [
|
||||
'فروردین',
|
||||
'اردیبهشت',
|
||||
'خرداد',
|
||||
'تیر',
|
||||
'مرداد',
|
||||
'شهریور',
|
||||
'مهر',
|
||||
'آبان',
|
||||
'آذر',
|
||||
'دی',
|
||||
'بهمن',
|
||||
'اسفند',
|
||||
]
|
||||
dayjs.updateLocale('fa', {
|
||||
monthsShort: months,
|
||||
months,
|
||||
})
|
||||
*/
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { FunctionalComponent } from 'vue';
|
||||
import type { ButtonProps } from 'ant-design-vue/es/button';
|
||||
import Button from 'ant-design-vue/es/button';
|
||||
|
||||
const PickerButton: FunctionalComponent<ButtonProps> = (props: ButtonProps, { attrs, slots }) => {
|
||||
return <Button size="small" type="primary" {...props} {...attrs} v-slots={slots}></Button>;
|
||||
};
|
||||
export default PickerButton;
|
||||
@@ -0,0 +1,6 @@
|
||||
import type { TagProps } from 'ant-design-vue/es/tag';
|
||||
import Tag from 'ant-design-vue/es/tag';
|
||||
|
||||
export default function PickerTag(props: TagProps, { slots, attrs }) {
|
||||
return <Tag color="blue" {...props} {...attrs} v-slots={slots} />;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { asyncExpect } from '../../../tests/utils'
|
||||
import dayjs from 'dayjs'
|
||||
import MockDate from 'mockdate'
|
||||
import DatePicker from '../index'
|
||||
import focusTest from '../../../tests/shared/focusTest'
|
||||
jest.mock('../../_util/Portal')
|
||||
describe('DatePicker', () => {
|
||||
focusTest(DatePicker)
|
||||
|
||||
beforeEach(() => {
|
||||
document.body.outerHTML = ''
|
||||
MockDate.set(dayjs('2016-11-22'))
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
MockDate.reset()
|
||||
})
|
||||
|
||||
it('prop locale should works', async () => {
|
||||
const locale = {
|
||||
lang: {
|
||||
locale: 'mk',
|
||||
placeholder: 'Избери дата',
|
||||
rangePlaceholder: ['Начална дата', 'Крайна дата'],
|
||||
today: 'Днес',
|
||||
now: 'Сега',
|
||||
backToToday: 'Към днес',
|
||||
ok: 'Добре',
|
||||
clear: 'Изчистване',
|
||||
month: 'Месец',
|
||||
year: 'Година',
|
||||
timeSelect: 'Избор на час',
|
||||
dateSelect: 'Избор на дата',
|
||||
monthSelect: 'Избор на месец',
|
||||
yearSelect: 'Избор на година',
|
||||
decadeSelect: 'Десетилетие',
|
||||
previousMonth: 'Предишен месец (PageUp)',
|
||||
nextMonth: 'Следващ месец (PageDown)',
|
||||
previousYear: 'Последна година (Control + left)',
|
||||
nextYear: 'Следваща година (Control + right)',
|
||||
previousDecade: 'Предишно десетилетие',
|
||||
nextDecade: 'Следващо десетилетие',
|
||||
previousCentury: 'Последен век',
|
||||
nextCentury: 'Следващ век',
|
||||
yearFormat: 'YYYY',
|
||||
dateFormat: 'D M YYYY',
|
||||
dayFormat: 'D',
|
||||
dateTimeFormat: 'D M YYYY HH:mm:ss',
|
||||
monthBeforeYear: true
|
||||
},
|
||||
timePickerLocale: {
|
||||
placeholder: 'Избор на час'
|
||||
}
|
||||
}
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD')
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <DatePicker open locale={locale} value={birthday} />
|
||||
}
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,17 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import DatePicker from '../index'
|
||||
import focusTest from '../../../tests/shared/focusTest'
|
||||
|
||||
const { QuarterPicker } = DatePicker
|
||||
jest.mock('../../_util/Portal')
|
||||
describe('QuarterPicker', () => {
|
||||
focusTest(QuarterPicker)
|
||||
fit('reset select item when popup close', async () => {
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: { style: { width: '400px' }, picker: 'quarter' },
|
||||
sync: false,
|
||||
attachTo: 'body'
|
||||
})
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,72 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { asyncExpect, setMockDate, resetMockDate, sleep } from '../../../tests/utils'
|
||||
import dayjs from 'dayjs'
|
||||
import DatePicker from '../index'
|
||||
import { openPicker, selectCell, closePicker } from './utils'
|
||||
import focusTest from '../../../tests/shared/focusTest'
|
||||
jest.mock('../../_util/Portal')
|
||||
const { RangePicker } = DatePicker
|
||||
|
||||
describe('RangePicker', () => {
|
||||
focusTest(RangePicker)
|
||||
|
||||
beforeEach(() => {
|
||||
document.body.outerHTML = ''
|
||||
setMockDate()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
resetMockDate()
|
||||
})
|
||||
// issue: https://github.com/ant-design/ant-design/issues/5872
|
||||
xit('should not throw error when value is reset to `[]`', async () => {
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD')
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: ['value'],
|
||||
setup(props) {
|
||||
return () => <RangePicker value={props.value} open />
|
||||
}
|
||||
},
|
||||
{ attachTo: 'body', sync: 'false' }
|
||||
)
|
||||
wrapper.setProps({ value: [birthday, birthday] })
|
||||
wrapper.setProps({ value: [] })
|
||||
await sleep(0)
|
||||
expect(() => {
|
||||
openPicker(wrapper)
|
||||
selectCell(wrapper, 3)
|
||||
closePicker(wrapper)
|
||||
|
||||
openPicker(wrapper, 1)
|
||||
selectCell(wrapper, 5, 1)
|
||||
closePicker(wrapper, 1)
|
||||
}).not.toThrow()
|
||||
})
|
||||
|
||||
it('show month panel according to value', async () => {
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn')
|
||||
const wrapper = mount(RangePicker, {
|
||||
props: {
|
||||
getPopupContainer: (trigger) => trigger,
|
||||
format: 'YYYY/MM/DD',
|
||||
showTime: true,
|
||||
open: true
|
||||
},
|
||||
sync: false,
|
||||
attachTo: 'body'
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.setProps({ value: [birthday, birthday] })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(document.body.innerHTML).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
fit('customize separator', async () => {
|
||||
const wrapper = mount(RangePicker, { props: { separator: 'test' } })
|
||||
await sleep()
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,27 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { asyncExpect, setMockDate } from '../../../tests/utils'
|
||||
import DatePicker from '../index'
|
||||
import focusTest from '../../../tests/shared/focusTest'
|
||||
|
||||
const { WeekPicker } = DatePicker
|
||||
jest.mock('../../_util/Portal')
|
||||
describe('WeekPicker', () => {
|
||||
beforeEach(() => {
|
||||
setMockDate()
|
||||
})
|
||||
focusTest(WeekPicker)
|
||||
|
||||
it('should support style prop', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return <WeekPicker style={{ width: '400px' }} />
|
||||
}
|
||||
},
|
||||
{ sync: false }
|
||||
)
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
})
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DatePicker prop locale should works 1`] = `
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Избери дата" title="2000-01-01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<div>
|
||||
<!---->
|
||||
<div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
|
||||
<div class="ant-picker-panel-container">
|
||||
<div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
|
||||
<div class="ant-picker-date-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn"><span class="ant-picker-prev-icon"></span></button>
|
||||
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Jan</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2000</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn"><span class="ant-picker-next-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Su</th>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="1999-12-26" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="1999-12-27" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="1999-12-28" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="1999-12-29" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="1999-12-30" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="1999-12-31" class="ant-picker-cell ant-picker-cell-end">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2000-01-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view ant-picker-cell-selected">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2000-01-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2000-01-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2000-01-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2000-01-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2000-01-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
<td title="2000-01-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
<td title="2000-01-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2000-01-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
<td title="2000-01-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">12</div>
|
||||
</td>
|
||||
<td title="2000-01-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">13</div>
|
||||
</td>
|
||||
<td title="2000-01-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">14</div>
|
||||
</td>
|
||||
<td title="2000-01-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">15</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">16</div>
|
||||
</td>
|
||||
<td title="2000-01-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">17</div>
|
||||
</td>
|
||||
<td title="2000-01-18" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">18</div>
|
||||
</td>
|
||||
<td title="2000-01-19" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">19</div>
|
||||
</td>
|
||||
<td title="2000-01-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">20</div>
|
||||
</td>
|
||||
<td title="2000-01-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">21</div>
|
||||
</td>
|
||||
<td title="2000-01-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">22</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">23</div>
|
||||
</td>
|
||||
<td title="2000-01-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">24</div>
|
||||
</td>
|
||||
<td title="2000-01-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">25</div>
|
||||
</td>
|
||||
<td title="2000-01-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="2000-01-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2000-01-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2000-01-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-30" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="2000-01-31" class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2000-02-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2000-02-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2000-02-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2000-02-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2000-02-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-picker-footer">
|
||||
<!---->
|
||||
<!----><a class="ant-picker-today-btn">Днес</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`QuarterPicker reset select item when popup close 1`] = `
|
||||
<div class="ant-picker" style="width: 400px;">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select quarter" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<!---->
|
||||
<div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
|
||||
<div class="ant-picker-panel-container">
|
||||
<div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
|
||||
<div class="ant-picker-quarter-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button>
|
||||
<!---->
|
||||
<div class="ant-picker-header-view"><button type="button" class="ant-picker-year-btn">2022</button></div>
|
||||
<!----><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<!---->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="2022-Q1" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">Q1</div>
|
||||
</td>
|
||||
<td title="2022-Q2" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">Q2</div>
|
||||
</td>
|
||||
<td title="2022-Q3" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">Q3</div>
|
||||
</td>
|
||||
<td title="2022-Q4" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">Q4</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
+557
@@ -0,0 +1,557 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`RangePicker customize separator 1`] = `
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator">test</div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<div>
|
||||
<!---->
|
||||
<div class="ant-picker-dropdown ant-picker-dropdown-range ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
|
||||
<div class="ant-picker-range-wrapper ant-picker-date-range-wrapper" style="min-width: 0px;">
|
||||
<div class="ant-picker-range-arrow" style="left: 0px;"></div>
|
||||
<div class="ant-picker-panel-container" style="margin-left: 0px;">
|
||||
<div class="ant-picker-panels">
|
||||
<div tabindex="0" class="ant-picker-panel ant-picker-panel-focused">
|
||||
<div class="ant-picker-date-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn">«</button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn">‹</button>
|
||||
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Sep</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2017</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn" style="visibility: hidden;">›</button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn" style="visibility: hidden;">»</button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Su</th>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="2017-08-27" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2017-08-28" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2017-08-29" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="2017-08-30" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="2017-08-31" class="ant-picker-cell ant-picker-cell-end">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2017-09-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-09-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-09-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-09-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2017-09-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-09-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-09-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
<td title="2017-09-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
<td title="2017-09-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-09-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2017-09-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
<td title="2017-09-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">12</div>
|
||||
</td>
|
||||
<td title="2017-09-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">13</div>
|
||||
</td>
|
||||
<td title="2017-09-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">14</div>
|
||||
</td>
|
||||
<td title="2017-09-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">15</div>
|
||||
</td>
|
||||
<td title="2017-09-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">16</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-09-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">17</div>
|
||||
</td>
|
||||
<td title="2017-09-18" class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today">
|
||||
<div class="ant-picker-cell-inner">18</div>
|
||||
</td>
|
||||
<td title="2017-09-19" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">19</div>
|
||||
</td>
|
||||
<td title="2017-09-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">20</div>
|
||||
</td>
|
||||
<td title="2017-09-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">21</div>
|
||||
</td>
|
||||
<td title="2017-09-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">22</div>
|
||||
</td>
|
||||
<td title="2017-09-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">23</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-09-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">24</div>
|
||||
</td>
|
||||
<td title="2017-09-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">25</div>
|
||||
</td>
|
||||
<td title="2017-09-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="2017-09-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2017-09-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2017-09-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="2017-09-30" class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-10-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-10-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2017-10-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-10-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2017-10-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-10-06" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-10-07" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div tabindex="0" class="ant-picker-panel ant-picker-panel-focused">
|
||||
<div class="ant-picker-date-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn" style="visibility: hidden;">«</button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn" style="visibility: hidden;">‹</button>
|
||||
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Oct</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2017</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn">›</button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn">»</button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Su</th>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="2017-10-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-10-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2017-10-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-10-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2017-10-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-10-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-10-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-10-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
<td title="2017-10-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
<td title="2017-10-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2017-10-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
<td title="2017-10-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">12</div>
|
||||
</td>
|
||||
<td title="2017-10-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">13</div>
|
||||
</td>
|
||||
<td title="2017-10-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">14</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-10-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">15</div>
|
||||
</td>
|
||||
<td title="2017-10-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">16</div>
|
||||
</td>
|
||||
<td title="2017-10-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">17</div>
|
||||
</td>
|
||||
<td title="2017-10-18" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">18</div>
|
||||
</td>
|
||||
<td title="2017-10-19" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">19</div>
|
||||
</td>
|
||||
<td title="2017-10-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">20</div>
|
||||
</td>
|
||||
<td title="2017-10-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">21</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-10-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">22</div>
|
||||
</td>
|
||||
<td title="2017-10-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">23</div>
|
||||
</td>
|
||||
<td title="2017-10-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">24</div>
|
||||
</td>
|
||||
<td title="2017-10-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">25</div>
|
||||
</td>
|
||||
<td title="2017-10-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="2017-10-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2017-10-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-10-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="2017-10-30" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="2017-10-31" class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2017-11-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-11-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2017-11-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-11-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2017-11-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-11-06" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-11-07" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
<td title="2017-11-08" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
<td title="2017-11-09" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
<td title="2017-11-10" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2017-11-11" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`RangePicker show month panel according to value 1`] = `
|
||||
<div data-v-app="">
|
||||
<div>
|
||||
<!---->
|
||||
<div class="ant-picker-dropdown ant-picker-dropdown-range" style="pointer-events: none; display: none;">
|
||||
<div class="ant-picker-range-wrapper ant-picker-date-range-wrapper" style="min-width: 0px;">
|
||||
<div class="ant-picker-range-arrow" style="left: 0px;"></div>
|
||||
<div class="ant-picker-panel-container" style="margin-left: 0px;">
|
||||
<div class="ant-picker-panels">
|
||||
<div tabindex="0" class="ant-picker-panel ant-picker-panel-has-range ant-picker-panel-focused">
|
||||
<div class="ant-picker-datetime-panel">
|
||||
<div class="ant-picker-date-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn">«</button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn">‹</button>
|
||||
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Jan</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2000</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn">›</button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn">»</button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Su</th>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="1999-12-26" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="1999-12-27" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="1999-12-28" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="1999-12-29" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="1999-12-30" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="1999-12-31" class="ant-picker-cell ant-picker-cell-end">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2000-01-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view ant-picker-cell-range-start ant-picker-cell-range-end ant-picker-cell-selected">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2000-01-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2000-01-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2000-01-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2000-01-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2000-01-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
<td title="2000-01-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
<td title="2000-01-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2000-01-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
<td title="2000-01-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">12</div>
|
||||
</td>
|
||||
<td title="2000-01-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">13</div>
|
||||
</td>
|
||||
<td title="2000-01-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">14</div>
|
||||
</td>
|
||||
<td title="2000-01-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">15</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">16</div>
|
||||
</td>
|
||||
<td title="2000-01-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">17</div>
|
||||
</td>
|
||||
<td title="2000-01-18" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">18</div>
|
||||
</td>
|
||||
<td title="2000-01-19" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">19</div>
|
||||
</td>
|
||||
<td title="2000-01-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">20</div>
|
||||
</td>
|
||||
<td title="2000-01-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">21</div>
|
||||
</td>
|
||||
<td title="2000-01-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">22</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">23</div>
|
||||
</td>
|
||||
<td title="2000-01-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">24</div>
|
||||
</td>
|
||||
<td title="2000-01-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">25</div>
|
||||
</td>
|
||||
<td title="2000-01-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="2000-01-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2000-01-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2000-01-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2000-01-30" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="2000-01-31" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2000-02-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2000-02-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2000-02-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2000-02-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2000-02-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-picker-time-panel">
|
||||
<div class="ant-picker-header">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-picker-header-view">2000/01/01</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-picker-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-picker-footer">
|
||||
<!---->
|
||||
<ul class="ant-picker-ranges">
|
||||
<!---->
|
||||
<li class="ant-picker-ok"><button class="ant-btn ant-btn-primary ant-btn-sm" type="button">
|
||||
<!----><span>Ok</span>
|
||||
</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
+186
@@ -0,0 +1,186 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WeekPicker should support style prop 1`] = `
|
||||
<div class="ant-picker" style="width: 400px;">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<!---->
|
||||
<div class="ant-picker-dropdown ant-slide-up-enter ant-slide-up-enter-prepare" style="pointer-events: none; display: none;">
|
||||
<div class="ant-picker-panel-container">
|
||||
<div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
|
||||
<div class="ant-picker-week-panel">
|
||||
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn"><span class="ant-picker-prev-icon"></span></button>
|
||||
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Sep</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2017</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn"><span class="ant-picker-next-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
|
||||
</div>
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th aria-label="empty cell"></th>
|
||||
<th>Su</th>
|
||||
<th>Mo</th>
|
||||
<th>Tu</th>
|
||||
<th>We</th>
|
||||
<th>Th</th>
|
||||
<th>Fr</th>
|
||||
<th>Sa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">35</td>
|
||||
<td title="2017-08-27" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2017-08-28" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2017-08-29" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="2017-08-30" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
<td title="2017-08-31" class="ant-picker-cell ant-picker-cell-end">
|
||||
<div class="ant-picker-cell-inner">31</div>
|
||||
</td>
|
||||
<td title="2017-09-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-09-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">36</td>
|
||||
<td title="2017-09-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-09-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2017-09-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-09-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-09-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
<td title="2017-09-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">8</div>
|
||||
</td>
|
||||
<td title="2017-09-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">9</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">37</td>
|
||||
<td title="2017-09-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">10</div>
|
||||
</td>
|
||||
<td title="2017-09-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">11</div>
|
||||
</td>
|
||||
<td title="2017-09-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">12</div>
|
||||
</td>
|
||||
<td title="2017-09-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">13</div>
|
||||
</td>
|
||||
<td title="2017-09-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">14</div>
|
||||
</td>
|
||||
<td title="2017-09-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">15</div>
|
||||
</td>
|
||||
<td title="2017-09-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">16</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">38</td>
|
||||
<td title="2017-09-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">17</div>
|
||||
</td>
|
||||
<td title="2017-09-18" class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today">
|
||||
<div class="ant-picker-cell-inner">18</div>
|
||||
</td>
|
||||
<td title="2017-09-19" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">19</div>
|
||||
</td>
|
||||
<td title="2017-09-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">20</div>
|
||||
</td>
|
||||
<td title="2017-09-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">21</div>
|
||||
</td>
|
||||
<td title="2017-09-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">22</div>
|
||||
</td>
|
||||
<td title="2017-09-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">23</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">39</td>
|
||||
<td title="2017-09-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">24</div>
|
||||
</td>
|
||||
<td title="2017-09-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">25</div>
|
||||
</td>
|
||||
<td title="2017-09-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">26</div>
|
||||
</td>
|
||||
<td title="2017-09-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">27</div>
|
||||
</td>
|
||||
<td title="2017-09-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">28</div>
|
||||
</td>
|
||||
<td title="2017-09-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">29</div>
|
||||
</td>
|
||||
<td title="2017-09-30" class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner">30</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ant-picker-week-panel-row">
|
||||
<td class="ant-picker-cell ant-picker-cell-week">40</td>
|
||||
<td title="2017-10-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner">1</div>
|
||||
</td>
|
||||
<td title="2017-10-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">2</div>
|
||||
</td>
|
||||
<td title="2017-10-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">3</div>
|
||||
</td>
|
||||
<td title="2017-10-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">4</div>
|
||||
</td>
|
||||
<td title="2017-10-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">5</div>
|
||||
</td>
|
||||
<td title="2017-10-06" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">6</div>
|
||||
</td>
|
||||
<td title="2017-10-07" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner">7</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
+710
@@ -0,0 +1,710 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/date-picker/demo/basic.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select quarter" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select year" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/bordered.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-borderless">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-borderless">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-borderless">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-borderless">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select quarter" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-borderless">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select year" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range ant-picker-borderless">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range ant-picker-borderless">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start week" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End week" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range ant-picker-borderless">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range ant-picker-borderless">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start year" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End year" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/date-render.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/disabled.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="2015-06-06" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-disabled">
|
||||
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="Select month" title="2015-06" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range ant-picker-disabled">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input disabled="" readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input disabled="" readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/disabled-date.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range" style="width: 400px;">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/extra-footer.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/format.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="2015/01/01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="01/01/2015" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="2015/01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="custom format: 2015/01/01" size="27" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="11/20 ~ 11/26" size="15" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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 01-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></span></span></div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/mode.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/presetted-ranges.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range" style="width: 400px;">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/range-picker.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="21" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start week" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End week" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End month" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start year" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End year" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/select-in-range.vue correctly 1`] = `
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/size.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-radio-group ant-radio-group-outline"><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>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-default">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-default">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select Month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker ant-picker-range ant-picker-default">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-default">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select Week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/start-end.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Start" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/suffix.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-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 01248.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 01249 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 01775.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 01775 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 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-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 01248.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 01249 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 01775.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 01775 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 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-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 01248.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 01249 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 01775.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 01775 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 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-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 01248.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 01249 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 01775.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 01775 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 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix">ab</span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix">ab</span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix">ab</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select week" title="" size="12" autocomplete="off"><span class="ant-picker-suffix">ab</span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/switchable.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-select ant-select-single ant-select-show-arrow">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">Time</span>
|
||||
<!---->
|
||||
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/text.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select Time" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/time.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 12px;">
|
||||
<div class="ant-picker">
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="Select Time" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-picker ant-picker-range">
|
||||
<div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start Time" size="18" autocomplete="off"></div>
|
||||
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
|
||||
<div class="ant-picker-input"><input readonly="" placeholder="End Time" size="18" autocomplete="off"></div>
|
||||
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
+1077
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('date-picker');
|
||||
@@ -0,0 +1,11 @@
|
||||
import DatePicker from '../index'
|
||||
import mountTest from '../../../tests/shared/mountTest'
|
||||
|
||||
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
||||
|
||||
describe('mount', () => {
|
||||
mountTest(DatePicker)
|
||||
mountTest(MonthPicker)
|
||||
mountTest(WeekPicker)
|
||||
mountTest(RangePicker)
|
||||
})
|
||||
@@ -0,0 +1,73 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { asyncExpect, sleep } from '../../../tests/utils'
|
||||
import dayjs from 'dayjs'
|
||||
import DatePicker from '../index'
|
||||
import LocaleProvider from '../../locale-provider'
|
||||
import locale from '../../locale-provider/zh_CN'
|
||||
jest.mock('../../_util/Portal')
|
||||
const { MonthPicker, WeekPicker } = DatePicker
|
||||
|
||||
describe('Picker format by locale', () => {
|
||||
const myLocale = {
|
||||
...locale,
|
||||
DatePicker: {
|
||||
...locale.DatePicker,
|
||||
dateFormat: 'YYYY 年 M 月 D 日',
|
||||
dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒',
|
||||
weekFormat: 'YYYY 年 W 周',
|
||||
monthFormat: 'YYYY 年 M 月'
|
||||
}
|
||||
}
|
||||
|
||||
const date = dayjs('2000-01-01', 'YYYY-MM-DD')
|
||||
function matchPicker(name, Picker, props) {
|
||||
it(name, async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<LocaleProvider locale={myLocale}>
|
||||
<Picker value={date} {...props} />
|
||||
</LocaleProvider>
|
||||
)
|
||||
}
|
||||
},
|
||||
{ sync: false }
|
||||
)
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
matchPicker('date', DatePicker)
|
||||
matchPicker('dateTime', DatePicker, { showTime: true })
|
||||
matchPicker('week', WeekPicker)
|
||||
matchPicker('month', MonthPicker)
|
||||
})
|
||||
|
||||
describe('MonthPicker and WeekPicker', () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
it('render MonthPicker', async () => {
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn')
|
||||
const wrapper = mount(MonthPicker, { props: { open: true }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
wrapper.setProps({ value: birthday })
|
||||
})
|
||||
|
||||
await asyncExpect(() => {
|
||||
expect(document.body.innerHTML).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('render WeekPicker', async () => {
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn')
|
||||
const wrapper = mount(WeekPicker, { props: { open: false }, sync: false })
|
||||
await sleep(10)
|
||||
wrapper.setProps({ value: birthday, open: true })
|
||||
await sleep(1000)
|
||||
expect(document.body.innerHTML).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
export function $$(className) {
|
||||
return document.body.querySelectorAll(className);
|
||||
}
|
||||
export function hasSelected(wrapper, date) {
|
||||
return document.body
|
||||
.querySelector(`[title="${date.format('LL')}"][role="gridcell"]`)
|
||||
.getAttribute('class')
|
||||
.split(' ')
|
||||
.includes('ant-calendar-selected-day');
|
||||
}
|
||||
|
||||
export function openPanel(wrapper) {
|
||||
wrapper.find('.ant-calendar-picker-input').trigger('click');
|
||||
}
|
||||
|
||||
export function clearInput(wrapper) {
|
||||
wrapper.find('.ant-calendar-picker-clear').trigger('click');
|
||||
}
|
||||
|
||||
export function nextYear() {
|
||||
$$('.ant-calendar-next-year-btn')[0].click();
|
||||
}
|
||||
|
||||
export function nextMonth() {
|
||||
$$('.ant-calendar-next-month-btn')[0].click();
|
||||
}
|
||||
|
||||
export function selectDateFromBody(date, index) {
|
||||
let calendar = document.body;
|
||||
if (index !== undefined) {
|
||||
calendar = document.body.querySelectorAll('.ant-calendar-range-part')[index];
|
||||
}
|
||||
calendar.querySelector(`[title="${date.format('LL')}"][role="gridcell"]`).click();
|
||||
}
|
||||
|
||||
export function openPicker(wrapper, index = 0) {
|
||||
wrapper.findAll('input')[index].trigger('mousedown');
|
||||
wrapper.findAll('input')[index].trigger('focus');
|
||||
}
|
||||
export function closePicker(wrapper, index = 0) {
|
||||
wrapper.findAll('input')[index].trigger('blur');
|
||||
}
|
||||
|
||||
export function selectCell(wrapper, text, index = 0) {
|
||||
let matchCell;
|
||||
$$('table')
|
||||
[index].querySelectorAll('td')
|
||||
.forEach(td => {
|
||||
if (td.textContent === String(text) && td.className.includes('-in-view')) {
|
||||
matchCell = td;
|
||||
td.click('click');
|
||||
}
|
||||
});
|
||||
|
||||
if (!matchCell) {
|
||||
throw new Error('Cell not match in picker panel.');
|
||||
}
|
||||
|
||||
return matchCell;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { App } from 'vue'
|
||||
import dataFnsGenerateConfig from '@core/components/BaseDatePicker/src/vc-picker/generate/dateFns'
|
||||
import type {
|
||||
PickerProps,
|
||||
PickerDateProps,
|
||||
RangePickerProps as BaseRangePickerProps
|
||||
} from './generatePicker'
|
||||
import generatePicker from './generatePicker'
|
||||
import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props'
|
||||
|
||||
export type DatePickerProps = PickerProps<Date> & ExtraDatePickerProps<Date>
|
||||
export type MonthPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>
|
||||
export type WeekPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>
|
||||
export type RangePickerProps = BaseRangePickerProps<Date> & ExtraRangePickerProps<Date>
|
||||
|
||||
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
|
||||
generatePicker<Date>(dataFnsGenerateConfig)
|
||||
|
||||
/* istanbul ignore next */
|
||||
export { RangePicker, WeekPicker, MonthPicker, QuarterPicker }
|
||||
|
||||
export default Object.assign(DatePicker, {
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
RangePicker,
|
||||
TimePicker,
|
||||
QuarterPicker,
|
||||
install: (app: App) => {
|
||||
app.component(DatePicker.name, DatePicker)
|
||||
app.component(RangePicker.name, RangePicker)
|
||||
app.component(MonthPicker.name, MonthPicker)
|
||||
app.component(WeekPicker.name, WeekPicker)
|
||||
app.component(QuarterPicker.name, QuarterPicker)
|
||||
return app
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import type { App } from 'vue'
|
||||
import dayjsGenerateConfig from '@core/components/BaseDatePicker/src/vc-picker/generate/dayjs'
|
||||
import type {
|
||||
PickerProps,
|
||||
PickerDateProps,
|
||||
RangePickerProps as BaseRangePickerProps
|
||||
} from './generatePicker'
|
||||
import generatePicker from './generatePicker'
|
||||
import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props'
|
||||
|
||||
export type DatePickerProps = PickerProps<Dayjs> & ExtraDatePickerProps<Dayjs>
|
||||
export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>
|
||||
export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>
|
||||
export type RangePickerProps = BaseRangePickerProps<Dayjs> & ExtraRangePickerProps<Dayjs>
|
||||
|
||||
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
|
||||
generatePicker<Dayjs>(dayjsGenerateConfig)
|
||||
|
||||
/* istanbul ignore next */
|
||||
export { RangePicker, WeekPicker, MonthPicker, QuarterPicker }
|
||||
|
||||
export default Object.assign(DatePicker, {
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
RangePicker,
|
||||
TimePicker,
|
||||
QuarterPicker,
|
||||
install: (app: App) => {
|
||||
app.component(DatePicker.name, DatePicker)
|
||||
app.component(RangePicker.name, RangePicker)
|
||||
app.component(MonthPicker.name, MonthPicker)
|
||||
app.component(WeekPicker.name, WeekPicker)
|
||||
app.component(QuarterPicker.name, QuarterPicker)
|
||||
return app
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
<docs>
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本用法
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，在浮层中可以选择或者输入日期。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic use case. Users can select or input a date in panel.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker v-model:value="value1" />
|
||||
<a-date-picker v-model:value="value2" picker="week" />
|
||||
<a-date-picker v-model:value="value3" picker="month" />
|
||||
<a-date-picker v-model:value="value4" picker="quarter" />
|
||||
<a-date-picker v-model:value="value5" picker="year" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value1: ref<Dayjs>(),
|
||||
value2: ref<Dayjs>(),
|
||||
value3: ref<Dayjs>(),
|
||||
value4: ref<Dayjs>(),
|
||||
value5: ref<Dayjs>(),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<docs>
|
||||
---
|
||||
order: 23
|
||||
title:
|
||||
zh-CN: 无边框
|
||||
en-US: Bordered-less
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
无边框样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Bordered-less style component.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker v-model:value="value1" :bordered="false" />
|
||||
<a-date-picker v-model:value="value2" picker="week" :bordered="false" />
|
||||
<a-date-picker v-model:value="value3" picker="month" :bordered="false" />
|
||||
<a-date-picker v-model:value="value4" picker="quarter" :bordered="false" />
|
||||
<a-date-picker v-model:value="value5" picker="year" :bordered="false" />
|
||||
|
||||
<a-range-picker v-model:value="value6" :bordered="false" />
|
||||
<a-range-picker v-model:value="value7" picker="week" :bordered="false" />
|
||||
<a-range-picker v-model:value="value8" picker="month" :bordered="false" />
|
||||
<a-range-picker v-model:value="value9" picker="year" :bordered="false" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value1: ref<Dayjs>(),
|
||||
value2: ref<Dayjs>(),
|
||||
value3: ref<Dayjs>(),
|
||||
value4: ref<Dayjs>(),
|
||||
value5: ref<Dayjs>(),
|
||||
value6: ref<[Dayjs, Dayjs]>(),
|
||||
value7: ref<[Dayjs, Dayjs]>(),
|
||||
value8: ref<[Dayjs, Dayjs]>(),
|
||||
value9: ref<[Dayjs, Dayjs]>(),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<docs>
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 定制日期单元格
|
||||
en-US: Customized Date Rendering
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `dateRender` 可以自定义日期单元格的内容和样式。
|
||||
|
||||
## en-US
|
||||
|
||||
We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker v-model:value="value1">
|
||||
<template #dateRender="{ current }">
|
||||
<div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">
|
||||
{{ current.date() }}
|
||||
</div>
|
||||
</template>
|
||||
</a-date-picker>
|
||||
<a-range-picker v-model:value="value2">
|
||||
<template #dateRender="{ current }">
|
||||
<div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">
|
||||
{{ current.date() }}
|
||||
</div>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { CSSProperties } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const getCurrentStyle = (current: Dayjs) => {
|
||||
const style: CSSProperties = {};
|
||||
|
||||
if (current.date() === 1) {
|
||||
style.border = '1px solid #1890ff';
|
||||
style.borderRadius = '50%';
|
||||
}
|
||||
|
||||
return style;
|
||||
};
|
||||
return {
|
||||
value1: ref<Dayjs>(),
|
||||
value2: ref<[Dayjs, Dayjs]>(),
|
||||
value3: ref<Dayjs>(),
|
||||
getCurrentStyle,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<docs>
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 不可选择日期和时间
|
||||
en-US: Disabled Date & Time
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间，其中 `disabledTime` 需要和 `showTime` 一起使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-date-picker
|
||||
v-model:value="value1"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled-date="disabledDate"
|
||||
:disabled-time="disabledDateTime"
|
||||
:show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
|
||||
/>
|
||||
<a-date-picker v-model:value="value2" :disabled-date="disabledDate" picker="month" />
|
||||
<a-range-picker v-model:value="value3" :disabled-date="disabledDate" />
|
||||
<a-range-picker
|
||||
v-model:value="value4"
|
||||
style="width: 400px"
|
||||
:disabled-date="disabledDate"
|
||||
:disabled-time="disabledRangeTime"
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const range = (start: number, end: number) => {
|
||||
const result = [];
|
||||
|
||||
for (let i = start; i < end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
// Can not select days before today and today
|
||||
return current && current < dayjs().endOf('day');
|
||||
};
|
||||
|
||||
const disabledDateTime = () => {
|
||||
return {
|
||||
disabledHours: () => range(0, 24).splice(4, 20),
|
||||
disabledMinutes: () => range(30, 60),
|
||||
disabledSeconds: () => [55, 56],
|
||||
};
|
||||
};
|
||||
|
||||
const disabledRangeTime = (_: Dayjs, type: 'start' | 'end') => {
|
||||
if (type === 'start') {
|
||||
return {
|
||||
disabledHours: () => range(0, 60).splice(4, 20),
|
||||
disabledMinutes: () => range(30, 60),
|
||||
disabledSeconds: () => [55, 56],
|
||||
};
|
||||
}
|
||||
return {
|
||||
disabledHours: () => range(0, 60).splice(20, 4),
|
||||
disabledMinutes: () => range(0, 31),
|
||||
disabledSeconds: () => [55, 56],
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
dayjs,
|
||||
value1: ref<Dayjs>(),
|
||||
value2: ref<Dayjs>(),
|
||||
value3: ref<[Dayjs, Dayjs]>(),
|
||||
value4: ref<[Dayjs, Dayjs]>(),
|
||||
disabledDate,
|
||||
disabledDateTime,
|
||||
disabledRangeTime,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<docs>
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 禁用
|
||||
en-US: Disabled
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
选择框的不可用状态。
|
||||
|
||||
## en-US
|
||||
|
||||
A disabled state of the `DatePicker`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-date-picker v-model:value="value1" />
|
||||
<a-date-picker v-model:value="value2" disabled picker="month" />
|
||||
<a-range-picker v-model:value="value3" disabled />
|
||||
<a-range-picker v-model:value="value4" :disabled="[false, true]" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const dateFormat = 'YYYY-MM-DD';
|
||||
return {
|
||||
value1: ref<Dayjs>(dayjs('2015-06-06', dateFormat)),
|
||||
value2: ref<Dayjs>(dayjs('2015-06', 'YYYY-MM')),
|
||||
value3: ref<[Dayjs, Dayjs]>([
|
||||
dayjs('2015-06-06', dateFormat),
|
||||
dayjs('2015-06-06', dateFormat),
|
||||
]),
|
||||
value4: ref<[Dayjs, Dayjs]>([
|
||||
dayjs('2019-09-03', dateFormat),
|
||||
dayjs('2019-11-22', dateFormat),
|
||||
]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 额外的页脚
|
||||
en-US: Extra Footer
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在浮层中加入额外的页脚，以满足某些定制信息的需求。
|
||||
|
||||
## en-US
|
||||
|
||||
Render extra footer in panel for customized requirements.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-date-picker>
|
||||
<template #renderExtraFooter>extra footer</template>
|
||||
</a-date-picker>
|
||||
<a-date-picker show-time>
|
||||
<template #renderExtraFooter>extra footer</template>
|
||||
</a-date-picker>
|
||||
<a-range-picker>
|
||||
<template #renderExtraFooter>extra footer</template>
|
||||
</a-range-picker>
|
||||
<a-range-picker show-time>
|
||||
<template #renderExtraFooter>extra footer</template>
|
||||
</a-range-picker>
|
||||
<a-date-picker placeholder="Select month" picker="month">
|
||||
<template #renderExtraFooter>extra footer</template>
|
||||
</a-date-picker>
|
||||
</a-space>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 日期格式
|
||||
en-US: Date Format
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `format` 属性，可以自定义日期显示格式。
|
||||
|
||||
## en-US
|
||||
|
||||
We can set the date format by `format`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker v-model:value="value1" :format="dateFormat" />
|
||||
<a-date-picker v-model:value="value2" :format="dateFormatList" />
|
||||
<a-date-picker v-model:value="value3" :format="monthFormat" picker="month" />
|
||||
<a-range-picker v-model:value="value4" :format="dateFormat" />
|
||||
<a-date-picker v-model:value="value5" :format="customFormat" />
|
||||
<a-date-picker v-model:value="value6" :format="customWeekStartEndFormat" picker="week" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const dateFormat = 'YYYY/MM/DD';
|
||||
const weekFormat = 'MM/DD';
|
||||
const monthFormat = 'YYYY/MM';
|
||||
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
|
||||
|
||||
const customWeekStartEndFormat = value =>
|
||||
`${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
|
||||
.endOf('week')
|
||||
.format(weekFormat)}`;
|
||||
return {
|
||||
value1: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
|
||||
value2: ref<Dayjs>(dayjs('01/01/2015', dateFormatList[0])),
|
||||
value3: ref<Dayjs>(dayjs('2015/01', monthFormat)),
|
||||
value4: ref<[Dayjs, Dayjs]>([
|
||||
dayjs('2015/01/01', dateFormat),
|
||||
dayjs('2015/01/01', dateFormat),
|
||||
]),
|
||||
value5: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
|
||||
value6: ref<Dayjs>(dayjs()),
|
||||
dateFormat,
|
||||
monthFormat,
|
||||
dateFormatList,
|
||||
customWeekStartEndFormat,
|
||||
customFormat: value => `custom format: ${value.format(dateFormat)}`,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<demo-sort>
|
||||
<Basic />
|
||||
<RangePicker />
|
||||
<Bordered />
|
||||
<Format />
|
||||
<Time />
|
||||
<Disabled />
|
||||
<DisabledDate />
|
||||
<SelectInRnage />
|
||||
<PresettedRanges />
|
||||
<ExtraFooter />
|
||||
<Size />
|
||||
<DateRender />
|
||||
<Mode />
|
||||
<Switchable />
|
||||
<Suffix />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic.vue';
|
||||
import DateRender from './date-render.vue';
|
||||
import DisabledDate from './disabled-date.vue';
|
||||
import Disabled from './disabled.vue';
|
||||
import ExtraFooter from './extra-footer.vue';
|
||||
import Format from './format.vue';
|
||||
import Mode from './mode.vue';
|
||||
import PresettedRanges from './presetted-ranges.vue';
|
||||
import SelectInRnage from './select-in-range.vue';
|
||||
import Size from './size.vue';
|
||||
import Switchable from './switchable.vue';
|
||||
import Time from './time.vue';
|
||||
import Suffix from './suffix.vue';
|
||||
import Bordered from './bordered.vue';
|
||||
import RangePicker from './range-picker.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
CN,
|
||||
US,
|
||||
components: {
|
||||
Basic,
|
||||
DateRender,
|
||||
DisabledDate,
|
||||
Disabled,
|
||||
ExtraFooter,
|
||||
Format,
|
||||
Mode,
|
||||
PresettedRanges,
|
||||
Size,
|
||||
Switchable,
|
||||
Time,
|
||||
Suffix,
|
||||
SelectInRnage,
|
||||
Bordered,
|
||||
RangePicker,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#components-date-picker-demo .ant-calendar-picker {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<docs>
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 受控面板
|
||||
en-US: Controlled Panels
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
|
||||
|
||||
## en-US
|
||||
|
||||
Determing which panel to show with `mode` and `onPanelChange`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker
|
||||
:mode="mode1"
|
||||
show-time
|
||||
@openChange="handleOpenChange1"
|
||||
@panelChange="handlePanelChange1"
|
||||
/>
|
||||
<a-range-picker
|
||||
:placeholder="['Start month', 'End month']"
|
||||
format="YYYY-MM"
|
||||
:value="value"
|
||||
:mode="mode2"
|
||||
@panelChange="handlePanelChange2"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const mode1 = ref<any>('time');
|
||||
const mode2 = ref<any>(['month', 'month']);
|
||||
const value = ref<[Dayjs, Dayjs]>();
|
||||
|
||||
const handleOpenChange1 = (open: boolean) => {
|
||||
if (open) {
|
||||
mode1.value = 'time';
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (val: [Dayjs, Dayjs]) => {
|
||||
value.value = val;
|
||||
};
|
||||
|
||||
const handlePanelChange1 = (_val: [Dayjs, Dayjs], mode: any) => {
|
||||
mode1.value = mode;
|
||||
};
|
||||
|
||||
const handlePanelChange2 = (val: [Dayjs, Dayjs], mode: any[]) => {
|
||||
value.value = val;
|
||||
mode2.value = [
|
||||
mode[0] === 'date' ? 'month' : mode[0],
|
||||
mode[1] === 'date' ? 'month' : mode[1],
|
||||
];
|
||||
};
|
||||
|
||||
return {
|
||||
mode1,
|
||||
mode2,
|
||||
value,
|
||||
handleOpenChange1,
|
||||
handleChange,
|
||||
handlePanelChange1,
|
||||
handlePanelChange2,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<docs>
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 预设范围
|
||||
en-US: Preset Ranges
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以预设常用的日期范围以提高用户体验。
|
||||
|
||||
## en-US
|
||||
|
||||
We can set presetted ranges to RangePicker to improve user experience.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-range-picker v-model:value="value1" :ranges="ranges" />
|
||||
<a-range-picker
|
||||
v-model:value="value2"
|
||||
style="width: 400px"
|
||||
:ranges="ranges"
|
||||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value1: ref<RangeValue>(),
|
||||
value2: ref<RangeValue>(),
|
||||
ranges: {
|
||||
Today: [dayjs(), dayjs()] as RangeValue,
|
||||
'This Month': [dayjs(), dayjs().endOf('month')] as RangeValue,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<docs>
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 范围选择器
|
||||
en-US: Range Picker
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过设置 `picker` 属性，指定范围选择器类型。
|
||||
|
||||
## en-US
|
||||
|
||||
Set range picker type by `picker` prop.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-range-picker v-model:value="value1" />
|
||||
<a-range-picker v-model:value="value2" show-time />
|
||||
<a-range-picker v-model:value="value3" picker="week" />
|
||||
<a-range-picker v-model:value="value4" picker="month" />
|
||||
<a-range-picker v-model:value="value5" picker="year" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value1: ref<RangeValue>(),
|
||||
value2: ref<RangeValue>(),
|
||||
value3: ref<RangeValue>(),
|
||||
value4: ref<RangeValue>(),
|
||||
value5: ref<RangeValue>(),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<docs>
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 选择不超过七天的范围
|
||||
en-US: Select range dates in 7 days
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
这里举例如何用 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
|
||||
|
||||
## en-US
|
||||
|
||||
A example shows how to select a dynamic range by using `onCalendarChange` and `disabledDate`.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-range-picker
|
||||
:value="hackValue || value"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChange"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const dates = ref<RangeValue>();
|
||||
const value = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 7;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
dates.value = [] as any;
|
||||
hackValue.value = [] as any;
|
||||
} else {
|
||||
hackValue.value = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (val: RangeValue) => {
|
||||
value.value = val;
|
||||
};
|
||||
|
||||
const onCalendarChange = (val: RangeValue) => {
|
||||
dates.value = val;
|
||||
};
|
||||
|
||||
return {
|
||||
dates,
|
||||
value,
|
||||
hackValue,
|
||||
disabledDate,
|
||||
onOpenChange,
|
||||
onChange,
|
||||
onCalendarChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<docs>
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 三种大小
|
||||
en-US: Three Sizes
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
三种大小的输入框，若不设置，则为 `default`。
|
||||
|
||||
## en-US
|
||||
|
||||
The input box comes in three sizes. `default` will be used if `size` is omitted.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-radio-group v-model:value="size">
|
||||
<a-radio-button value="large">Large</a-radio-button>
|
||||
<a-radio-button value="default">Default</a-radio-button>
|
||||
<a-radio-button value="small">Small</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-date-picker :size="size" />
|
||||
<a-date-picker :size="size" placeholder="Select Month" picker="month" />
|
||||
<a-range-picker :size="size" />
|
||||
<a-date-picker :size="size" placeholder="Select Week" picker="week" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
size: ref<any>('default'),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<docs>
|
||||
---
|
||||
order: 11
|
||||
title:
|
||||
zh-CN: 自定义日期范围选择
|
||||
en-US: Customized Range Picker
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。
|
||||
> - 通过设置 `disabledDate` 方法，来约束开始和结束日期。
|
||||
> - 通过 `open` `openChange` 来优化交互。
|
||||
|
||||
## en-US
|
||||
|
||||
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
|
||||
> - Use the `disabledDate` property to limit the start and end dates.
|
||||
> - Improve user experience with `open` and `openChange`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-date-picker
|
||||
v-model:value="startValue"
|
||||
:disabled-date="disabledStartDate"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Start"
|
||||
@openChange="handleStartOpenChange"
|
||||
/>
|
||||
<a-date-picker
|
||||
v-model:value="endValue"
|
||||
:disabled-date="disabledEndDate"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="End"
|
||||
:open="endOpen"
|
||||
@openChange="handleEndOpenChange"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const startValue = ref<Dayjs>();
|
||||
const endValue = ref<Dayjs>();
|
||||
const endOpen = ref<boolean>(false);
|
||||
|
||||
const disabledStartDate = (startValue: Dayjs) => {
|
||||
if (!startValue || !endValue.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return startValue.valueOf() > endValue.value.valueOf();
|
||||
};
|
||||
|
||||
const disabledEndDate = (endValue: Dayjs) => {
|
||||
if (!endValue || !startValue.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return startValue.value.valueOf() >= endValue.valueOf();
|
||||
};
|
||||
|
||||
const handleStartOpenChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
endOpen.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndOpenChange = (open: boolean) => {
|
||||
endOpen.value = open;
|
||||
};
|
||||
|
||||
watch(startValue, () => {
|
||||
console.log('startValue', startValue.value);
|
||||
});
|
||||
|
||||
watch(endValue, () => {
|
||||
console.log('endValue', endValue.value);
|
||||
});
|
||||
|
||||
return {
|
||||
startValue,
|
||||
endValue,
|
||||
endOpen,
|
||||
disabledStartDate,
|
||||
disabledEndDate,
|
||||
handleStartOpenChange,
|
||||
handleEndOpenChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,69 @@
|
||||
<docs>
|
||||
---
|
||||
order: 13
|
||||
title:
|
||||
zh-CN: 后缀图标
|
||||
en-US: Suffix
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `suffixIcon` 自定义后缀图标
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the suffix icon through `suffixIcon`
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-date-picker @change="onChange">
|
||||
<template #suffixIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-date-picker>
|
||||
<a-date-picker placeholder="Select month" picker="month" @change="onChange">
|
||||
<template #suffixIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-date-picker>
|
||||
<a-range-picker @change="onRangeChange">
|
||||
<template #suffixIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-range-picker>
|
||||
<a-date-picker placeholder="Select week" picker="week" @change="onChange">
|
||||
<template #suffixIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-date-picker>
|
||||
<a-date-picker suffix-icon="ab" @change="onChange" />
|
||||
<a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange" />
|
||||
<a-range-picker suffix-icon="ab" @change="onRangeChange" />
|
||||
<a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange" />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { SmileOutlined } from '@ant-design/icons-vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SmileOutlined,
|
||||
},
|
||||
setup() {
|
||||
const onChange = (date: Dayjs | string, dateString: string) => {
|
||||
console.log(date, dateString);
|
||||
};
|
||||
|
||||
const onRangeChange = (date: [Dayjs, Dayjs], dateString: [string, string]) => {
|
||||
console.log(date, dateString);
|
||||
};
|
||||
return {
|
||||
onChange,
|
||||
onRangeChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<docs>
|
||||
---
|
||||
order: 1.1
|
||||
title:
|
||||
zh-CN: 切换不同的选择器
|
||||
en-US: Switchable picker
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
|
||||
|
||||
## en-US
|
||||
|
||||
Switch in different types of pickers by Select.
|
||||
</docs>
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-select v-model:value="type">
|
||||
<a-select-option value="time">Time</a-select-option>
|
||||
<a-select-option value="date">Date</a-select-option>
|
||||
<a-select-option value="week">Week</a-select-option>
|
||||
<a-select-option value="month">Month</a-select-option>
|
||||
<a-select-option value="quarter">Quarter</a-select-option>
|
||||
<a-select-option value="year">Year</a-select-option>
|
||||
</a-select>
|
||||
<template v-if="type === 'time'">
|
||||
<a-time-picker />
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-date-picker :picker="type" />
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
type: ref<any>('time'),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<docs>
|
||||
---
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 自定义渲染
|
||||
en-US: Custum Time
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
增加自定义渲染功能，在默认 `slot` 中，你可以设置任何你想渲染的组件。
|
||||
|
||||
## en-US
|
||||
|
||||
Added custom rendering function, in the default `slot`, you can set any component you want to render.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker v-model:value="time1" placeholder="Select Time" @ok="onOk">
|
||||
<span>{{ time1 ? time1.toString() : 'SelectTime' }}</span>
|
||||
</a-date-picker>
|
||||
<a-range-picker v-model:value="time2">
|
||||
<span>
|
||||
{{ time2 ? time2.toString() : '请选择' }}
|
||||
</span>
|
||||
</a-range-picker>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const time1 = ref<Dayjs>();
|
||||
const time2 = ref<[Dayjs, Dayjs]>();
|
||||
|
||||
const onOk = (value: Dayjs) => {
|
||||
console.log('onOk: ', value);
|
||||
};
|
||||
|
||||
const clearTime = () => {
|
||||
time1.value = undefined;
|
||||
};
|
||||
|
||||
return {
|
||||
time1,
|
||||
time2,
|
||||
onOk,
|
||||
clearTime,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<docs>
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 日期时间选择
|
||||
en-US: Choose Time
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。
|
||||
|
||||
## en-US
|
||||
|
||||
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
|
||||
<a-range-picker
|
||||
:show-time="{ format: 'HH:mm' }"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:placeholder="['Start Time', 'End Time']"
|
||||
@change="onRangeChange"
|
||||
@ok="onRangeOk"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const onChange = (value: Dayjs, dateString: string) => {
|
||||
console.log('Selected Time: ', value);
|
||||
console.log('Formatted Selected Time: ', dateString);
|
||||
};
|
||||
|
||||
const onOk = (value: Dayjs) => {
|
||||
console.log('onOk: ', value);
|
||||
};
|
||||
|
||||
const onRangeChange = (value: [Dayjs, Dayjs], dateString: [string, string]) => {
|
||||
console.log('Selected Time: ', value);
|
||||
console.log('Formatted Selected Time: ', dateString);
|
||||
};
|
||||
|
||||
const onRangeOk = (value: [Dayjs, Dayjs]) => {
|
||||
console.log('onOk: ', value);
|
||||
};
|
||||
|
||||
return {
|
||||
onChange,
|
||||
onOk,
|
||||
onRangeChange,
|
||||
onRangeOk,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
+217
@@ -0,0 +1,217 @@
|
||||
import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined'
|
||||
import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined'
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
|
||||
import SwapRightOutlined from '@ant-design/icons-vue/SwapRightOutlined'
|
||||
import { RangePicker as VCRangePicker } from '../../vc-picker'
|
||||
import type { GenerateConfig } from '@core/components/BaseDatePicker/src/vc-picker/generate'
|
||||
import enUS from '../locale/en_US'
|
||||
import { useLocaleReceiver } from 'ant-design-vue/es/locale-provider/LocaleReceiver'
|
||||
import { getRangePlaceholder } from '../util'
|
||||
import { getTimeProps, Components } from './index'
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
|
||||
import classNames from 'ant-design-vue/es/_util/classNames'
|
||||
import type { CommonProps, RangePickerProps } from './props'
|
||||
import { commonProps, rangePickerProps } from './props'
|
||||
import type { PanelMode, RangeValue } from '@core/components/BaseDatePicker/src/vc-picker/interface'
|
||||
import type { RangePickerSharedProps } from '@core/components/BaseDatePicker/src/vc-picker/RangePicker'
|
||||
import devWarning from 'ant-design-vue/es/vc-util/devWarning'
|
||||
import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext'
|
||||
import omit from 'ant-design-vue/es/_util/omit'
|
||||
|
||||
export default function generateRangePicker<DateType, ExtraProps = {}>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps: ExtraProps
|
||||
) {
|
||||
const RangePicker = defineComponent({
|
||||
name: 'ARangePicker',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
...commonProps<DateType>(),
|
||||
...rangePickerProps<DateType>(),
|
||||
...extraProps
|
||||
},
|
||||
slots: [
|
||||
'suffixIcon',
|
||||
// 'clearIcon',
|
||||
'prevIcon',
|
||||
'nextIcon',
|
||||
'superPrevIcon',
|
||||
'superNextIcon',
|
||||
// 'panelRender',
|
||||
'dateRender',
|
||||
'renderExtraFooter'
|
||||
// 'separator',
|
||||
],
|
||||
setup(_props, { expose, slots, attrs, emit }) {
|
||||
const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>
|
||||
const formItemContext = useInjectFormItemContext()
|
||||
devWarning(
|
||||
!attrs.getCalendarContainer,
|
||||
'DatePicker',
|
||||
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.'
|
||||
)
|
||||
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
|
||||
'picker',
|
||||
props
|
||||
)
|
||||
const pickerRef = ref()
|
||||
expose({
|
||||
focus: () => {
|
||||
pickerRef.value?.focus()
|
||||
},
|
||||
blur: () => {
|
||||
pickerRef.value?.blur()
|
||||
}
|
||||
})
|
||||
const maybeToStrings = (dates: DateType[]) => {
|
||||
return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates
|
||||
}
|
||||
const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
|
||||
const values = maybeToStrings(dates)
|
||||
emit('update:value', values)
|
||||
emit('change', values, dateStrings)
|
||||
formItemContext.onFieldChange()
|
||||
}
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open)
|
||||
emit('openChange', open)
|
||||
}
|
||||
const onFocus = (e: FocusEvent) => {
|
||||
emit('focus', e)
|
||||
}
|
||||
const onBlur = (e: FocusEvent) => {
|
||||
emit('blur', e)
|
||||
formItemContext.onFieldBlur()
|
||||
}
|
||||
const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
|
||||
const values = maybeToStrings(dates)
|
||||
emit('panelChange', values, modes)
|
||||
}
|
||||
const onOk = (dates: DateType[]) => {
|
||||
const value = maybeToStrings(dates)
|
||||
emit('ok', value)
|
||||
}
|
||||
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
|
||||
dates: [DateType, DateType],
|
||||
dateStrings: [string, string],
|
||||
info
|
||||
) => {
|
||||
const values = maybeToStrings(dates)
|
||||
emit('calendarChange', values, dateStrings, info)
|
||||
}
|
||||
const [contextLocale] = useLocaleReceiver('DatePicker', enUS)
|
||||
|
||||
const value = computed(() => {
|
||||
if (props.value) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(props.value, props.valueFormat)
|
||||
: props.value
|
||||
}
|
||||
return props.value
|
||||
})
|
||||
const defaultValue = computed(() => {
|
||||
if (props.defaultValue) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(props.defaultValue, props.valueFormat)
|
||||
: props.defaultValue
|
||||
}
|
||||
return props.defaultValue
|
||||
})
|
||||
const defaultPickerValue = computed(() => {
|
||||
if (props.defaultPickerValue) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(props.defaultPickerValue, props.valueFormat)
|
||||
: props.defaultPickerValue
|
||||
}
|
||||
return props.defaultPickerValue
|
||||
})
|
||||
return () => {
|
||||
const locale = { ...contextLocale.value, ...props.locale }
|
||||
const p = { ...props, ...attrs }
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
bordered = true,
|
||||
placeholder,
|
||||
suffixIcon = slots.suffixIcon?.(),
|
||||
picker = 'date',
|
||||
transitionName,
|
||||
allowClear = true,
|
||||
dateRender = slots.dateRender,
|
||||
renderExtraFooter = slots.renderExtraFooter,
|
||||
separator = slots.separator?.(),
|
||||
clearIcon = slots.clearIcon?.(),
|
||||
id = formItemContext.id.value,
|
||||
...restProps
|
||||
} = p
|
||||
delete restProps['onUpdate:value']
|
||||
delete restProps['onUpdate:open']
|
||||
const { format, showTime } = p as any
|
||||
|
||||
let additionalOverrideProps: any = {}
|
||||
additionalOverrideProps = {
|
||||
...additionalOverrideProps,
|
||||
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
|
||||
...(picker === 'time'
|
||||
? getTimeProps({ format, ...omit(restProps, ['disabledTime']), picker })
|
||||
: {})
|
||||
}
|
||||
const pre = prefixCls.value
|
||||
return (
|
||||
<VCRangePicker
|
||||
dateRender={dateRender}
|
||||
renderExtraFooter={renderExtraFooter}
|
||||
separator={
|
||||
separator || (
|
||||
<span aria-label="to" class={`${pre}-separator`}>
|
||||
<SwapRightOutlined />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
ref={pickerRef}
|
||||
placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])}
|
||||
suffixIcon={
|
||||
suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
|
||||
}
|
||||
clearIcon={clearIcon || <CloseCircleFilled />}
|
||||
allowClear={allowClear}
|
||||
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
|
||||
{...restProps}
|
||||
{...additionalOverrideProps}
|
||||
id={id}
|
||||
value={value.value}
|
||||
defaultValue={defaultValue.value}
|
||||
defaultPickerValue={defaultPickerValue.value}
|
||||
picker={picker}
|
||||
class={classNames(
|
||||
{
|
||||
[`${pre}-${size.value}`]: size.value,
|
||||
[`${pre}-borderless`]: !bordered
|
||||
},
|
||||
attrs.class
|
||||
)}
|
||||
locale={locale!.lang}
|
||||
prefixCls={pre}
|
||||
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
|
||||
generateConfig={generateConfig}
|
||||
prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
|
||||
nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
|
||||
superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
|
||||
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
|
||||
components={Components}
|
||||
direction={direction.value}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
onCalendarChange={onCalendarChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return RangePicker
|
||||
}
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined'
|
||||
import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined'
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
|
||||
import RCPicker from '../../vc-picker'
|
||||
import type { PanelMode, PickerMode } from '@core/components/BaseDatePicker/src/vc-picker/interface'
|
||||
import type { GenerateConfig } from '@core/components/BaseDatePicker/src/vc-picker/generate'
|
||||
import enUS from '../locale/en_US'
|
||||
import { getPlaceholder } from '../util'
|
||||
import { useLocaleReceiver } from 'ant-design-vue/es/locale-provider/LocaleReceiver'
|
||||
import { getTimeProps, Components } from './index'
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
|
||||
import classNames from 'ant-design-vue/es/_util/classNames'
|
||||
import type { CommonProps, DatePickerProps } from './props'
|
||||
import { commonProps, datePickerProps } from './props'
|
||||
|
||||
import devWarning from 'ant-design-vue/es/vc-util/devWarning'
|
||||
import { useInjectFormItemContext } from 'ant-design-vue/es/form/FormItemContext'
|
||||
|
||||
export default function generateSinglePicker<DateType, ExtraProps = {}>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps: ExtraProps
|
||||
) {
|
||||
function getPicker(picker?: PickerMode, displayName?: string) {
|
||||
const comProps = {
|
||||
...commonProps<DateType>(),
|
||||
...datePickerProps<DateType>(),
|
||||
...extraProps
|
||||
}
|
||||
return defineComponent({
|
||||
name: displayName,
|
||||
inheritAttrs: false,
|
||||
props: comProps,
|
||||
slots: [
|
||||
'suffixIcon',
|
||||
// 'clearIcon',
|
||||
'prevIcon',
|
||||
'nextIcon',
|
||||
'superPrevIcon',
|
||||
'superNextIcon',
|
||||
// 'panelRender',
|
||||
'dateRender',
|
||||
'renderExtraFooter',
|
||||
'monthCellRender'
|
||||
],
|
||||
setup(_props, { slots, expose, attrs, emit }) {
|
||||
// 兼容 vue 3.2.7
|
||||
const props = _props as unknown as CommonProps<DateType> &
|
||||
DatePickerProps<DateType> &
|
||||
ExtraProps
|
||||
const formItemContext = useInjectFormItemContext()
|
||||
devWarning(
|
||||
!(props.monthCellContentRender || slots.monthCellContentRender),
|
||||
'DatePicker',
|
||||
'`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.'
|
||||
)
|
||||
|
||||
devWarning(
|
||||
!attrs.getCalendarContainer,
|
||||
'DatePicker',
|
||||
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.'
|
||||
)
|
||||
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
|
||||
'picker',
|
||||
props
|
||||
)
|
||||
const pickerRef = ref()
|
||||
expose({
|
||||
focus: () => {
|
||||
pickerRef.value?.focus()
|
||||
},
|
||||
blur: () => {
|
||||
pickerRef.value?.blur()
|
||||
}
|
||||
})
|
||||
const maybeToString = (date: DateType) => {
|
||||
return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date
|
||||
}
|
||||
const onChange = (date: DateType, dateString: string) => {
|
||||
const value = maybeToString(date)
|
||||
emit('update:value', value)
|
||||
emit('change', value, dateString)
|
||||
formItemContext.onFieldChange()
|
||||
}
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('update:open', open)
|
||||
emit('openChange', open)
|
||||
}
|
||||
const onFocus = (e: FocusEvent) => {
|
||||
emit('focus', e)
|
||||
}
|
||||
const onBlur = (e: FocusEvent) => {
|
||||
emit('blur', e)
|
||||
formItemContext.onFieldBlur()
|
||||
}
|
||||
const onPanelChange = (date: DateType, mode: PanelMode | null) => {
|
||||
const value = maybeToString(date)
|
||||
emit('panelChange', value, mode)
|
||||
}
|
||||
const onOk = (date: DateType) => {
|
||||
const value = maybeToString(date)
|
||||
emit('ok', value)
|
||||
}
|
||||
|
||||
const [contextLocale] = useLocaleReceiver('DatePicker', enUS)
|
||||
|
||||
const value = computed(() => {
|
||||
if (props.value) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(props.value as string | DateType, props.valueFormat)
|
||||
: props.value
|
||||
}
|
||||
return (props.value === '' ? undefined : props.value) as DateType
|
||||
})
|
||||
const defaultValue = computed(() => {
|
||||
if (props.defaultValue) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(props.defaultValue as string | DateType, props.valueFormat)
|
||||
: props.defaultValue
|
||||
}
|
||||
return (props.defaultValue === '' ? undefined : props.defaultValue) as DateType
|
||||
})
|
||||
const defaultPickerValue = computed(() => {
|
||||
if (props.defaultPickerValue) {
|
||||
return props.valueFormat
|
||||
? generateConfig.toDate(
|
||||
props.defaultPickerValue as string | DateType,
|
||||
props.valueFormat
|
||||
)
|
||||
: props.defaultPickerValue
|
||||
}
|
||||
return (
|
||||
props.defaultPickerValue === '' ? undefined : props.defaultPickerValue
|
||||
) as DateType
|
||||
})
|
||||
|
||||
return () => {
|
||||
const locale = { ...contextLocale.value, ...props.locale }
|
||||
const p = { ...props, ...attrs }
|
||||
const {
|
||||
bordered = true,
|
||||
placeholder,
|
||||
suffixIcon = slots.suffixIcon?.(),
|
||||
showToday = true,
|
||||
transitionName,
|
||||
allowClear = true,
|
||||
dateRender = slots.dateRender,
|
||||
renderExtraFooter = slots.renderExtraFooter,
|
||||
monthCellRender = slots.monthCellRender ||
|
||||
(props as any).monthCellContentRender ||
|
||||
slots.monthCellContentRender,
|
||||
clearIcon = slots.clearIcon?.(),
|
||||
id = formItemContext.id.value,
|
||||
...restProps
|
||||
} = p
|
||||
const showTime = p.showTime === '' ? true : p.showTime
|
||||
const { format } = p as any
|
||||
|
||||
let additionalOverrideProps: any = {}
|
||||
if (picker) {
|
||||
additionalOverrideProps.picker = picker
|
||||
}
|
||||
const mergedPicker = picker || p.picker || 'date'
|
||||
|
||||
additionalOverrideProps = {
|
||||
...additionalOverrideProps,
|
||||
...(showTime
|
||||
? getTimeProps({
|
||||
format,
|
||||
picker: mergedPicker,
|
||||
...(typeof showTime === 'object' ? showTime : {})
|
||||
})
|
||||
: {}),
|
||||
...(mergedPicker === 'time'
|
||||
? getTimeProps({ format, ...restProps, picker: mergedPicker })
|
||||
: {})
|
||||
}
|
||||
const pre = prefixCls.value
|
||||
return (
|
||||
<RCPicker
|
||||
monthCellRender={monthCellRender}
|
||||
dateRender={dateRender}
|
||||
renderExtraFooter={renderExtraFooter}
|
||||
ref={pickerRef}
|
||||
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
|
||||
suffixIcon={
|
||||
suffixIcon ||
|
||||
(mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
|
||||
}
|
||||
clearIcon={clearIcon || <CloseCircleFilled />}
|
||||
allowClear={allowClear}
|
||||
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
|
||||
{...restProps}
|
||||
{...additionalOverrideProps}
|
||||
id={id}
|
||||
picker={mergedPicker}
|
||||
value={value.value}
|
||||
defaultValue={defaultValue.value}
|
||||
defaultPickerValue={defaultPickerValue.value}
|
||||
showToday={showToday}
|
||||
locale={locale!.lang}
|
||||
class={classNames(
|
||||
{
|
||||
[`${pre}-${size.value}`]: size.value,
|
||||
[`${pre}-borderless`]: !bordered
|
||||
},
|
||||
attrs.class
|
||||
)}
|
||||
prefixCls={pre}
|
||||
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
|
||||
generateConfig={generateConfig}
|
||||
prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
|
||||
nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
|
||||
superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
|
||||
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
|
||||
components={Components}
|
||||
direction={direction.value}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const DatePicker = getPicker(undefined, 'ADatePicker')
|
||||
const WeekPicker = getPicker('week', 'AWeekPicker')
|
||||
const MonthPicker = getPicker('month', 'AMonthPicker')
|
||||
const YearPicker = getPicker('year', 'AYearPicker')
|
||||
const TimePicker = getPicker('time', 'TimePicker') // 给独立组件 TimePicker 使用，此处名称不用更改
|
||||
const QuarterPicker = getPicker('quarter', 'AQuarterPicker')
|
||||
|
||||
return {
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
QuarterPicker
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import type { GenerateConfig } from '@core/components/BaseDatePicker/src/vc-picker/generate'
|
||||
import type { SharedTimeProps } from '@core/components/BaseDatePicker/src/vc-picker/panels/TimePanel'
|
||||
import type { PickerMode } from '@core/components/BaseDatePicker/src/vc-picker/interface'
|
||||
import PickerButton from '../PickerButton'
|
||||
import PickerTag from '../PickerTag'
|
||||
import generateSinglePicker from './generateSinglePicker'
|
||||
import generateRangePicker from './generateRangePicker'
|
||||
|
||||
export * from './interface'
|
||||
|
||||
export const Components = { button: PickerButton, rangeItem: PickerTag }
|
||||
|
||||
function toArray<T>(list: T | T[]): T[] {
|
||||
if (!list) {
|
||||
return []
|
||||
}
|
||||
return Array.isArray(list) ? list : [list]
|
||||
}
|
||||
|
||||
export function getTimeProps<DateType>(
|
||||
props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>
|
||||
) {
|
||||
const { format, picker, showHour, showMinute, showSecond, use12Hours } = props
|
||||
|
||||
const firstFormat = toArray(format)[0]
|
||||
const showTimeObj: SharedTimeProps<DateType> = { ...props }
|
||||
|
||||
if (firstFormat && typeof firstFormat === 'string') {
|
||||
if (!firstFormat.includes('s') && showSecond === undefined) {
|
||||
showTimeObj.showSecond = false
|
||||
}
|
||||
if (!firstFormat.includes('m') && showMinute === undefined) {
|
||||
showTimeObj.showMinute = false
|
||||
}
|
||||
if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
|
||||
showTimeObj.showHour = false
|
||||
}
|
||||
|
||||
if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
|
||||
showTimeObj.use12Hours = true
|
||||
}
|
||||
}
|
||||
|
||||
if (picker === 'time') {
|
||||
return showTimeObj
|
||||
}
|
||||
|
||||
if (typeof firstFormat === 'function') {
|
||||
// format of showTime should use default when format is custom format function
|
||||
delete showTimeObj.format
|
||||
}
|
||||
|
||||
return {
|
||||
showTime: showTimeObj
|
||||
}
|
||||
}
|
||||
|
||||
function generatePicker<DateType, ExtraProps extends {} = {}>(
|
||||
generateConfig: GenerateConfig<DateType>,
|
||||
extraProps?: ExtraProps
|
||||
) {
|
||||
// =========================== Picker ===========================
|
||||
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
|
||||
generateSinglePicker<DateType, ExtraProps>(generateConfig, extraProps)
|
||||
|
||||
// ======================== Range Picker ========================
|
||||
const RangePicker = generateRangePicker<DateType, ExtraProps>(generateConfig, extraProps)
|
||||
|
||||
return {
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
QuarterPicker,
|
||||
RangePicker
|
||||
}
|
||||
}
|
||||
|
||||
export default generatePicker
|
||||
@@ -0,0 +1,74 @@
|
||||
import type {
|
||||
PickerBaseProps as RCPickerBaseProps,
|
||||
PickerDateProps as RCPickerDateProps,
|
||||
PickerTimeProps as RCPickerTimeProps
|
||||
} from '@core/components/BaseDatePicker/src/vc-picker/Picker'
|
||||
import type {
|
||||
RangePickerBaseProps as RCRangePickerBaseProps,
|
||||
RangePickerDateProps as RCRangePickerDateProps,
|
||||
RangePickerTimeProps as RCRangePickerTimeProps
|
||||
} from '@core/components/BaseDatePicker/src/vc-picker/RangePicker'
|
||||
import type { Locale as RcPickerLocale } from '@core/components/BaseDatePicker/src/vc-picker/interface'
|
||||
import type { TimePickerLocale } from 'ant-design-vue/es/time-picker'
|
||||
import type { SizeType } from 'ant-design-vue/es/config-provider'
|
||||
|
||||
type InjectDefaultProps<Props> = Omit<
|
||||
Props,
|
||||
| 'locale'
|
||||
| 'generateConfig'
|
||||
| 'prevIcon'
|
||||
| 'nextIcon'
|
||||
| 'superPrevIcon'
|
||||
| 'superNextIcon'
|
||||
| 'hideHeader'
|
||||
| 'components'
|
||||
> & {
|
||||
locale?: PickerLocale
|
||||
size?: SizeType
|
||||
bordered?: boolean
|
||||
}
|
||||
|
||||
export type PickerLocale = {
|
||||
lang: RcPickerLocale & AdditionalPickerLocaleLangProps
|
||||
timePickerLocale: TimePickerLocale
|
||||
} & AdditionalPickerLocaleProps
|
||||
|
||||
export type AdditionalPickerLocaleProps = {
|
||||
dateFormat?: string
|
||||
dateTimeFormat?: string
|
||||
weekFormat?: string
|
||||
monthFormat?: string
|
||||
}
|
||||
|
||||
export type AdditionalPickerLocaleLangProps = {
|
||||
placeholder: string
|
||||
yearPlaceholder?: string
|
||||
quarterPlaceholder?: string
|
||||
monthPlaceholder?: string
|
||||
weekPlaceholder?: string
|
||||
rangeYearPlaceholder?: [string, string]
|
||||
rangeQuarterPlaceholder?: [string, string]
|
||||
rangeMonthPlaceholder?: [string, string]
|
||||
rangeWeekPlaceholder?: [string, string]
|
||||
rangePlaceholder?: [string, string]
|
||||
}
|
||||
|
||||
// Picker Props
|
||||
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>
|
||||
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>
|
||||
export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>
|
||||
|
||||
export type PickerProps<DateType> =
|
||||
| PickerBaseProps<DateType>
|
||||
| PickerDateProps<DateType>
|
||||
| PickerTimeProps<DateType>
|
||||
|
||||
// Range Picker Props
|
||||
export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>
|
||||
export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>
|
||||
export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>
|
||||
|
||||
export type RangePickerProps<DateType> =
|
||||
| RangePickerBaseProps<DateType>
|
||||
| RangePickerDateProps<DateType>
|
||||
| RangePickerTimeProps<DateType>
|
||||
@@ -0,0 +1,289 @@
|
||||
import type { FocusEventHandler, MouseEventHandler } from 'ant-design-vue/es/_util/EventInterface'
|
||||
import type { CSSProperties, PropType } from 'vue'
|
||||
import type { PickerLocale } from './index'
|
||||
import type { SizeType } from 'ant-design-vue/es/config-provider'
|
||||
import type { AlignType } from 'ant-design-vue/es/vc-align/interface'
|
||||
import type {
|
||||
CustomFormat,
|
||||
DisabledTime,
|
||||
DisabledTimes,
|
||||
EventValue,
|
||||
PanelMode,
|
||||
PickerMode,
|
||||
RangeValue
|
||||
} from '@core/components/BaseDatePicker/src/vc-picker/interface'
|
||||
import type { DateRender } from '@core/components/BaseDatePicker/src/vc-picker/panels/DatePanel/DateBody'
|
||||
import type { MonthCellRender } from '@core/components/BaseDatePicker/src/vc-picker/panels/MonthPanel/MonthBody'
|
||||
import type { SharedTimeProps } from '@core/components/BaseDatePicker/src/vc-picker/panels/TimePanel'
|
||||
import type {
|
||||
RangeDateRender,
|
||||
RangeInfo,
|
||||
RangeType
|
||||
} from '@core/components/BaseDatePicker/src/vc-picker/RangePicker'
|
||||
import type { VueNode } from 'ant-design-vue/es/_util/type'
|
||||
|
||||
function commonProps<DateType = any>() {
|
||||
return {
|
||||
id: String,
|
||||
dropdownClassName: String,
|
||||
dropdownAlign: { type: Object as PropType<AlignType> },
|
||||
popupStyle: { type: Object as PropType<CSSProperties> },
|
||||
transitionName: String,
|
||||
placeholder: String,
|
||||
allowClear: { type: Boolean, default: undefined },
|
||||
autofocus: { type: Boolean, default: undefined },
|
||||
disabled: { type: Boolean, default: undefined },
|
||||
tabindex: Number,
|
||||
open: { type: Boolean, default: undefined },
|
||||
defaultOpen: { type: Boolean, default: undefined },
|
||||
/** Make input readOnly to avoid popup keyboard in mobile */
|
||||
inputReadOnly: { type: Boolean, default: undefined },
|
||||
// Value
|
||||
// format: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
|
||||
// Render
|
||||
// suffixIcon?: VueNode;
|
||||
// clearIcon?: VueNode;
|
||||
// prevIcon?: VueNode;
|
||||
// nextIcon?: VueNode;
|
||||
// superPrevIcon?: VueNode;
|
||||
// superNextIcon?: VueNode;
|
||||
getPopupContainer: { type: Function as PropType<(node: HTMLElement) => HTMLElement> },
|
||||
panelRender: { type: Function as PropType<(originPanel: VueNode) => VueNode> },
|
||||
// // Events
|
||||
onChange: {
|
||||
type: Function as PropType<(value: DateType | string | null, dateString: string) => void>
|
||||
},
|
||||
'onUpdate:value': { type: Function as PropType<(value: DateType | string | null) => void> },
|
||||
onOk: { type: Function as PropType<(value: DateType | string | null) => void> },
|
||||
onOpenChange: { type: Function as PropType<(open: boolean) => void> },
|
||||
'onUpdate:open': { type: Function as PropType<(open: boolean) => void> },
|
||||
onFocus: { type: Function as PropType<FocusEventHandler> },
|
||||
onBlur: { type: Function as PropType<FocusEventHandler> },
|
||||
onMousedown: { type: Function as PropType<MouseEventHandler> },
|
||||
onMouseup: { type: Function as PropType<MouseEventHandler> },
|
||||
onMouseenter: { type: Function as PropType<MouseEventHandler> },
|
||||
onMouseleave: { type: Function as PropType<MouseEventHandler> },
|
||||
onClick: { type: Function as PropType<MouseEventHandler> },
|
||||
onContextmenu: { type: Function as PropType<MouseEventHandler> },
|
||||
onKeydown: {
|
||||
type: Function as PropType<(event: KeyboardEvent, preventDefault: () => void) => void>
|
||||
},
|
||||
// WAI-ARIA
|
||||
role: String,
|
||||
name: String,
|
||||
autocomplete: String,
|
||||
direction: { type: String as PropType<'ltr' | 'rtl'> },
|
||||
showToday: { type: Boolean, default: undefined },
|
||||
showTime: {
|
||||
type: [Boolean, Object] as PropType<boolean | SharedTimeProps<DateType>>,
|
||||
default: undefined
|
||||
},
|
||||
locale: { type: Object as PropType<PickerLocale> },
|
||||
size: { type: String as PropType<SizeType> },
|
||||
bordered: { type: Boolean, default: undefined },
|
||||
dateRender: { type: Function as PropType<DateRender<DateType>> },
|
||||
disabledDate: { type: Function as PropType<(date: DateType) => boolean> },
|
||||
mode: { type: String as PropType<PanelMode> },
|
||||
picker: { type: String as PropType<PickerMode> },
|
||||
valueFormat: String,
|
||||
|
||||
/** @deprecated Please use `disabledTime` instead. */
|
||||
disabledHours: Function as PropType<DisabledTimes['disabledHours']>,
|
||||
/** @deprecated Please use `disabledTime` instead. */
|
||||
disabledMinutes: Function as PropType<DisabledTimes['disabledMinutes']>,
|
||||
/** @deprecated Please use `disabledTime` instead. */
|
||||
disabledSeconds: Function as PropType<DisabledTimes['disabledSeconds']>
|
||||
}
|
||||
}
|
||||
|
||||
export interface CommonProps<DateType> {
|
||||
id?: string
|
||||
prefixCls?: string
|
||||
dropdownClassName?: string
|
||||
dropdownAlign?: AlignType
|
||||
popupStyle?: CSSProperties
|
||||
transitionName?: string
|
||||
placeholder?: string
|
||||
allowClear?: boolean
|
||||
autofocus?: boolean
|
||||
disabled?: boolean
|
||||
tabindex?: number
|
||||
open?: boolean
|
||||
defaultOpen?: boolean
|
||||
inputReadOnly?: boolean
|
||||
suffixIcon?: VueNode
|
||||
clearIcon?: VueNode
|
||||
prevIcon?: VueNode
|
||||
nextIcon?: VueNode
|
||||
superPrevIcon?: VueNode
|
||||
superNextIcon?: VueNode
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement
|
||||
panelRender?: (originPanel: VueNode) => VueNode
|
||||
onChange?: (value: DateType | string | null, dateString: string) => void
|
||||
'onUpdate:value'?: (value: DateType | string | null) => void
|
||||
onOk?: (value: DateType | string | null) => void
|
||||
onOpenChange?: (open: boolean) => void
|
||||
'onUpdate:open'?: (open: boolean) => void
|
||||
onFocus?: FocusEventHandler
|
||||
onBlur?: FocusEventHandler
|
||||
onMousedown?: MouseEventHandler
|
||||
onMouseup?: MouseEventHandler
|
||||
onMouseenter?: MouseEventHandler
|
||||
onMouseleave?: MouseEventHandler
|
||||
onClick?: MouseEventHandler
|
||||
onContextmenu?: MouseEventHandler
|
||||
onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void
|
||||
role?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
direction?: 'ltr' | 'rtl'
|
||||
showToday?: boolean
|
||||
showTime?: boolean | SharedTimeProps<DateType>
|
||||
locale?: PickerLocale
|
||||
size?: SizeType
|
||||
bordered?: boolean
|
||||
dateRender?: DateRender<DateType>
|
||||
disabledDate?: (date: DateType) => boolean
|
||||
mode?: PanelMode
|
||||
picker?: PickerMode
|
||||
valueFormat?: string
|
||||
}
|
||||
|
||||
function datePickerProps<DateType = any>() {
|
||||
return {
|
||||
defaultPickerValue: { type: [String, Object] as PropType<DateType | string> },
|
||||
defaultValue: { type: [String, Object] as PropType<DateType | string> },
|
||||
value: { type: [String, Object] as PropType<DateType | string> },
|
||||
disabledTime: { type: Function as PropType<DisabledTime<DateType>> },
|
||||
format: {
|
||||
type: [String, Function, Array] as PropType<
|
||||
string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]
|
||||
>
|
||||
},
|
||||
renderExtraFooter: { type: Function as PropType<(mode: PanelMode) => VueNode> },
|
||||
showNow: { type: Boolean, default: undefined },
|
||||
monthCellRender: { type: Function as PropType<MonthCellRender<DateType>> },
|
||||
// deprecated Please use `monthCellRender"` instead.',
|
||||
monthCellContentRender: { type: Function as PropType<MonthCellRender<DateType>> }
|
||||
}
|
||||
}
|
||||
|
||||
export interface DatePickerProps<DateType> {
|
||||
defaultPickerValue?: DateType | string
|
||||
defaultValue?: DateType | string
|
||||
value?: DateType | string
|
||||
disabledTime?: DisabledTime<DateType>
|
||||
format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]
|
||||
renderExtraFooter?: (mode: PanelMode) => VueNode
|
||||
showNow?: boolean
|
||||
monthCellRender?: MonthCellRender<DateType>
|
||||
// deprecated Please use `monthCellRender"` instead.',
|
||||
monthCellContentRender?: MonthCellRender<DateType>
|
||||
}
|
||||
|
||||
function rangePickerProps<DateType>() {
|
||||
return {
|
||||
allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
|
||||
dateRender: { type: Function as PropType<RangeDateRender<DateType>> },
|
||||
defaultPickerValue: {
|
||||
type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>>
|
||||
},
|
||||
defaultValue: { type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>> },
|
||||
value: { type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>> },
|
||||
disabledTime: {
|
||||
type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>
|
||||
},
|
||||
disabled: { type: [Boolean, Array] as unknown as PropType<boolean | [boolean, boolean]> },
|
||||
format: String,
|
||||
renderExtraFooter: { type: Function as PropType<() => VueNode> },
|
||||
separator: { type: String },
|
||||
ranges: {
|
||||
type: Object as PropType<
|
||||
Record<
|
||||
string,
|
||||
Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
|
||||
>
|
||||
>
|
||||
},
|
||||
placeholder: Array,
|
||||
mode: { type: Array as unknown as PropType<[PanelMode, PanelMode]> },
|
||||
onChange: {
|
||||
type: Function as PropType<
|
||||
(
|
||||
value: RangeValue<DateType> | RangeValue<string> | null,
|
||||
dateString: [string, string]
|
||||
) => void
|
||||
>
|
||||
},
|
||||
'onUpdate:value': {
|
||||
type: Function as PropType<(value: RangeValue<DateType> | RangeValue<string> | null) => void>
|
||||
},
|
||||
onCalendarChange: {
|
||||
type: Function as PropType<
|
||||
(
|
||||
values: RangeValue<DateType> | RangeValue<string>,
|
||||
formatString: [string, string],
|
||||
info: RangeInfo
|
||||
) => void
|
||||
>
|
||||
},
|
||||
onPanelChange: {
|
||||
type: Function as PropType<
|
||||
(values: RangeValue<DateType> | RangeValue<string>, modes: [PanelMode, PanelMode]) => void
|
||||
>
|
||||
},
|
||||
onOk: {
|
||||
type: Function as PropType<(dates: RangeValue<DateType> | RangeValue<string>) => void>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface RangePickerProps<DateType> {
|
||||
allowEmpty?: [boolean, boolean]
|
||||
dateRender?: RangeDateRender<DateType>
|
||||
defaultPickerValue?: RangeValue<DateType> | RangeValue<string>
|
||||
defaultValue?: RangeValue<DateType> | RangeValue<string>
|
||||
value?: RangeValue<DateType> | RangeValue<string>
|
||||
disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes
|
||||
disabled?: [boolean, boolean]
|
||||
format?: string
|
||||
renderExtraFooter?: () => VueNode
|
||||
separator?: string
|
||||
ranges?: Record<
|
||||
string,
|
||||
Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
|
||||
>
|
||||
placeholder?: [string, string]
|
||||
mode?: [PanelMode, PanelMode]
|
||||
onChange?: (
|
||||
value: RangeValue<DateType> | RangeValue<string> | null,
|
||||
dateString: [string, string]
|
||||
) => void
|
||||
'onUpdate:value'?: (value: RangeValue<DateType> | RangeValue<string> | null) => void
|
||||
onCalendarChange?: (
|
||||
values: RangeValue<DateType> | RangeValue<string>,
|
||||
formatString: [string, string],
|
||||
info: RangeInfo
|
||||
) => void
|
||||
onPanelChange?: (
|
||||
values: RangeValue<DateType> | RangeValue<string>,
|
||||
modes: [PanelMode, PanelMode]
|
||||
) => void
|
||||
onOk?: (dates: RangeValue<DateType> | RangeValue<string>) => void
|
||||
}
|
||||
|
||||
export type ExtraDatePickerProps<DateType> = {
|
||||
valueFormat?: string
|
||||
defaultPickerValue?: DateType | string
|
||||
defaultValue?: DateType | string
|
||||
value?: DateType | string
|
||||
}
|
||||
|
||||
export type ExtraRangePickerProps<DateType> = {
|
||||
valueFormat?: string
|
||||
defaultPickerValue?: RangeValue<DateType> | RangeValue<string>
|
||||
defaultValue?: RangeValue<DateType> | RangeValue<string>
|
||||
value?: RangeValue<DateType> | RangeValue<string>
|
||||
}
|
||||
|
||||
export { commonProps, datePickerProps, rangePickerProps }
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: DatePicker
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
|
||||
---
|
||||
|
||||
To select or input a date.
|
||||
|
||||
## When To Use
|
||||
|
||||
By clicking the input box, you can select a date from a popup calendar.
|
||||
|
||||
## API
|
||||
|
||||
There are five kinds of picker:
|
||||
|
||||
- DatePicker
|
||||
- DatePicker\[picker="month"]
|
||||
- DatePicker\[picker="week"]
|
||||
- DatePicker\[picker="year"]
|
||||
- DatePicker\[picker="quarter"]
|
||||
- RangePicker
|
||||
|
||||
### Localization
|
||||
|
||||
The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](/components/config-provider/).
|
||||
|
||||
If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json).
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-date-picker v-model:value="value" :locale="locale" />
|
||||
</template>
|
||||
<script>
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
locale,
|
||||
value: null,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<a-date-picker v-model:value="value" />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import { defineComponent } from 'vue';
|
||||
dayjs.locale('zh-cn');
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value: dayjs('2015-01-01', 'YYYY-MM-DD')
|
||||
dayjs,
|
||||
locale
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Common API
|
||||
|
||||
The following APIs are shared by DatePicker, RangePicker.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | Whether to show clear button | boolean | true | |
|
||||
| autofocus | If get focus when component mounted | boolean | false | |
|
||||
| bordered | Whether has border style | boolean | true | |
|
||||
| dateRender | Custom rendering function for date cells | v-slot:dateRender="{current, today}" | - | |
|
||||
| disabled | Determine whether the DatePicker is disabled | boolean | false | |
|
||||
| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | |
|
||||
| dropdownClassName | To customize the className of the popup calendar | string | - | |
|
||||
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
| locale | Localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) | |
|
||||
| mode | The picker panel mode | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| nextIcon | The custom next icon | slot | - | 3.0 |
|
||||
| open | The open state of picker | boolean | - | |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter` |
|
||||
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
|
||||
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| prevIcon | The custom prev icon | slot | - | 3.0 |
|
||||
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | The custom suffix icon | v-slot:suffixIcon | - | |
|
||||
| superNextIcon | The custom super next icon | slot | - | 3.0 |
|
||||
| superPrevIcon | The custom super prev icon | slot | - | 3.0 |
|
||||
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
|
||||
|
||||
### Common Events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| 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
|
||||
|
||||
| Name | Description | Version |
|
||||
| ------- | ------------ | ------- |
|
||||
| blur() | remove focus | |
|
||||
| focus() | get focus | |
|
||||
|
||||
### DatePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
||||
| renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter="mode" | - | |
|
||||
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | |
|
||||
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
||||
| showToday | Whether to show `Today` button | boolean | true | |
|
||||
| value(v-model) | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
|
||||
### DatePicker Events
|
||||
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(date: dayjs \| string, dateString: string) | |
|
||||
| ok | callback when click ok button | function(date: dayjs \| string) | |
|
||||
|
||||
### DatePicker\[picker=year]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` | |
|
||||
|
||||
### DatePicker\[picker=quarter]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | |
|
||||
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` | |
|
||||
| monthCellRender | Custom month cell content render method | v-slot:monthCellRender="{current, locale}" | - | |
|
||||
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | Customize date cell. | v-slot:dateRender="{current: dayjs, today: dayjs, info: { range: `start` \| `end` }}" | - | |
|
||||
| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| disabled | If disable start or end | \[boolean, boolean] | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` | |
|
||||
| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
|
||||
| renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter | - | |
|
||||
| separator | Set separator between inputs | string \| v-slot:separator | `<SwapRightOutlined />` | |
|
||||
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
||||
| value(v-model) | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
|
||||
### RangePicker Events
|
||||
|
||||
| Events Name | Description | Arguments | Version | |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| calendarChange | Callback function, can be executed when the start time or the end time of the range is changing. | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) | | |
|
||||
| ok | callback when click ok button | function(dates: \[dayjs, dayjs] \| \[string, string]) | | |
|
||||
|
||||
## FAQ
|
||||
|
||||
### How to use DatePicker with customize date library（like moment.js \| dayjs \| date-fns）？
|
||||
|
||||
Please refer [replace date](/docs/vue/replace-date)
|
||||
|
||||
### Why config dayjs.locale globally not work?
|
||||
|
||||
DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead.
|
||||
@@ -0,0 +1,4 @@
|
||||
import DatePicker from './dayjs';
|
||||
export * from './dayjs';
|
||||
|
||||
export default DatePicker;
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: DatePicker
|
||||
subtitle: 日期选择框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
|
||||
---
|
||||
|
||||
输入或选择日期的控件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
|
||||
|
||||
## API
|
||||
|
||||
日期类组件包括以下五种形式。
|
||||
|
||||
- DatePicker
|
||||
- DatePicker\[picker="month"]
|
||||
- DatePicker\[picker="week"]
|
||||
- DatePicker\[picker="year"]
|
||||
- DatePicker\[picker="quarter"]
|
||||
- RangePicker
|
||||
|
||||
### 国际化配置
|
||||
|
||||
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](/components/config-provider-cn/)。
|
||||
|
||||
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json)。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-date-picker v-model:value="value" :locale="locale" />
|
||||
</template>
|
||||
<script>
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
locale,
|
||||
value: null,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<a-date-picker v-model:value="value" />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script>
|
||||
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import { defineComponent } from 'vue';
|
||||
dayjs.locale('zh-cn');
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
value: dayjs('2015-01-01', 'YYYY-MM-DD')
|
||||
dayjs,
|
||||
locale
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### 共同的 API
|
||||
|
||||
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 是否显示清除按钮 | boolean | true | |
|
||||
| autofocus | 自动获取焦点 | boolean | false | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| dateRender | 自定义日期单元格的内容 | v-slot:dateRender="{current, today}" | - | |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - | |
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) | - |
|
||||
| mode | 日期面板的状态 | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| nextIcon | 自定义下一个图标 | slot | - | 3.0 |
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter` |
|
||||
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| prevIcon | 自定义上一个图标 | slot | - | 3.0 |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | |
|
||||
| superNextIcon | 自定义 `<<` 切换图标 | slot | - | 3.0 |
|
||||
| superPrevIcon | 自定义 `>>` 切换图标 | slot | - | 3.0 |
|
||||
| valueFormat | 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
|
||||
|
||||
### 共有的事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 | |
|
||||
| ----------- | ------------------------ | --------------------- | --- |
|
||||
| openChange | 弹出日历和关闭日历的回调 | function(status) | |
|
||||
| panelChange | 日期面板变化时的回调 | function(value, mode) | - |
|
||||
|
||||
### 共同的方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| ------- | -------- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
|
||||
### DatePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | - | |
|
||||
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | v-slot:renderExtraFooter="mode" | - | |
|
||||
| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | |
|
||||
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
||||
| value(v-model) | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
|
||||
### DatePicker 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| -------- | ------------------ | --------------------------------------------------- |
|
||||
| change | 时间发生变化的回调 | function(date: dayjs \| string, dateString: string) |
|
||||
| ok | 点击确定按钮的回调 | function(date: dayjs \| string) |
|
||||
|
||||
### DatePicker\[picker=year]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY` | |
|
||||
|
||||
### DatePicker\[picker=quarter]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-\QQ` | |
|
||||
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-MM` | |
|
||||
| monthCellRender | 自定义的月份内容渲染方法 | v-slot:monthCellRender="{current, locale}" | - | |
|
||||
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-wo` | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | 自定义日期单元格的内容。 | v-slot:dateRender="{current: dayjs, today: dayjs, info: { range: `start` \| `end` }}" | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - | |
|
||||
| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| separator | 设置分隔符 | string \| v-slot:separator | `<SwapRightOutlined />` | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
||||
| value(v-model) | 日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
|
||||
### RangePicker 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| calendarChange | 待选日期发生变化的回调 | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string], info: { range:`start`\|`end` }) |
|
||||
| change | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) |
|
||||
| ok | 点击确定按钮的回调 | function(dates: \[dayjs, dayjs] \| \[string, string]) |
|
||||
|
||||
## FAQ
|
||||
|
||||
### 如何在 DatePicker 中使用自定义日期库（如 moment.js \| dayjs \| date-fns）？
|
||||
|
||||
请参考[《自定义日期库》](/docs/vue/replace-date-cn)
|
||||
|
||||
### 为何全局修改 dayjs.locale 不生效？
|
||||
|
||||
DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `locale` 属性来单独设置，也可以通过 [ConfigProvider `locale`](/components/config-provider-cn) 属性来配置。
|
||||
@@ -0,0 +1,24 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ar_EG'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ar_EG'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'اختيار التاريخ',
|
||||
rangePlaceholder: ['البداية', 'النهاية'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
},
|
||||
dateFormat: 'DD-MM-YYYY',
|
||||
monthFormat: 'MM-YYYY',
|
||||
dateTimeFormat: 'DD-MM-YYYY HH:mm:ss',
|
||||
weekFormat: 'wo-YYYY'
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,16 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/az_AZ'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/az_AZ'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Tarix seçin',
|
||||
rangePlaceholder: ['Başlama tarixi', 'Bitmə tarixi'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/bg_BG'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/bg_BG'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/bn_BD'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/bn_BD'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'তারিখ নির্বাচন',
|
||||
yearPlaceholder: 'বছর নির্বাচন',
|
||||
quarterPlaceholder: 'কোয়ার্টার নির্বাচন',
|
||||
monthPlaceholder: 'মাস নির্বাচন',
|
||||
weekPlaceholder: 'সপ্তাহ নির্বাচন',
|
||||
rangePlaceholder: ['শুরুর তারিখ', 'শেষ তারিখ'],
|
||||
rangeYearPlaceholder: ['শুরুর বছর', 'শেষ বছর'],
|
||||
rangeMonthPlaceholder: ['শুরুর মাস', 'শেষ মাস'],
|
||||
rangeWeekPlaceholder: ['শুরুর সপ্তাহ', 'শেষ সপ্তাহ'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,23 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/by_BY'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/by_BY'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Выберыце дату',
|
||||
yearPlaceholder: 'Выберыце год',
|
||||
quarterPlaceholder: 'Выберыце квартал',
|
||||
monthPlaceholder: 'Выберыце месяц',
|
||||
weekPlaceholder: 'Выберыце тыдзень',
|
||||
rangePlaceholder: ['Пачатковая дата', 'Канчатковая дата'],
|
||||
rangeYearPlaceholder: ['Пачатковы год', 'Год заканчэння'],
|
||||
rangeMonthPlaceholder: ['Пачатковы месяц', 'Канчатковы месяц'],
|
||||
rangeWeekPlaceholder: ['Пачатковы тыдзень', 'Канчатковы тыдзень'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ca_ES'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ca_ES'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Seleccionar data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/cs_CZ'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/cs_CZ'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vybrat datum',
|
||||
rangePlaceholder: ['Od', 'Do'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/da_DK'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/da_DK'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vælg dato',
|
||||
rangePlaceholder: ['Startdato', 'Slutdato'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/de_DE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/de_DE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Datum auswählen',
|
||||
rangePlaceholder: ['Startdatum', 'Enddatum'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/el_GR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/el_GR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Επιλέξτε ημερομηνία',
|
||||
rangePlaceholder: ['Αρχική ημερομηνία', 'Τελική ημερομηνία'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,28 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/en_GB'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/en_GB'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Select date',
|
||||
yearPlaceholder: 'Select year',
|
||||
quarterPlaceholder: 'Select quarter',
|
||||
monthPlaceholder: 'Select month',
|
||||
weekPlaceholder: 'Select week',
|
||||
rangePlaceholder: ['Start date', 'End date'],
|
||||
rangeYearPlaceholder: ['Start year', 'End year'],
|
||||
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
|
||||
rangeMonthPlaceholder: ['Start month', 'End month'],
|
||||
rangeWeekPlaceholder: ['Start week', 'End week'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,28 @@
|
||||
import CalendarLocale from 'ant-design-vue/es/vc-picker/locale/en_US';
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/en_US';
|
||||
import type { PickerLocale } from '../generatePicker';
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Select date',
|
||||
yearPlaceholder: 'Select year',
|
||||
quarterPlaceholder: 'Select quarter',
|
||||
monthPlaceholder: 'Select month',
|
||||
weekPlaceholder: 'Select week',
|
||||
rangePlaceholder: ['Start date', 'End date'],
|
||||
rangeYearPlaceholder: ['Start year', 'End year'],
|
||||
rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
|
||||
rangeMonthPlaceholder: ['Start month', 'End month'],
|
||||
rangeWeekPlaceholder: ['Start week', 'End week'],
|
||||
...CalendarLocale,
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale,
|
||||
},
|
||||
};
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale;
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/es_ES'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/es_ES'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Seleccionar fecha',
|
||||
rangePlaceholder: ['Fecha inicial', 'Fecha final'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/et_EE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/et_EE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// 统一合并为完整的 Locale
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Vali kuupäev',
|
||||
rangePlaceholder: ['Algus kuupäev', 'Lõpu kuupäev'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"lang": {
|
||||
"locale": "en_US",
|
||||
"placeholder": "Select date",
|
||||
"rangePlaceholder": ["Start date", "End date"],
|
||||
"today": "Today",
|
||||
"now": "Now",
|
||||
"backToToday": "Back to today",
|
||||
"ok": "OK",
|
||||
"clear": "Clear",
|
||||
"month": "Month",
|
||||
"year": "Year",
|
||||
"timeSelect": "Select time",
|
||||
"dateSelect": "Select date",
|
||||
"monthSelect": "Choose a month",
|
||||
"yearSelect": "Choose a year",
|
||||
"decadeSelect": "Choose a decade",
|
||||
"yearFormat": "YYYY",
|
||||
"dateFormat": "M/D/YYYY",
|
||||
"dayFormat": "D",
|
||||
"dateTimeFormat": "M/D/YYYY HH:mm:ss",
|
||||
"monthFormat": "MMMM",
|
||||
"monthBeforeYear": true,
|
||||
"previousMonth": "Previous month (PageUp)",
|
||||
"nextMonth": "Next month (PageDown)",
|
||||
"previousYear": "Last year (Control + left)",
|
||||
"nextYear": "Next year (Control + right)",
|
||||
"previousDecade": "Last decade",
|
||||
"nextDecade": "Next decade",
|
||||
"previousCentury": "Last century",
|
||||
"nextCentury": "Next century"
|
||||
},
|
||||
"timePickerLocale": {
|
||||
"placeholder": "Select time"
|
||||
},
|
||||
"dateFormat": "YYYY-MM-DD",
|
||||
"dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
|
||||
"weekFormat": "YYYY-wo",
|
||||
"monthFormat": "YYYY-MM"
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/fa_IR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/fa_IR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'انتخاب تاریخ',
|
||||
yearPlaceholder: 'انتخاب سال',
|
||||
quarterPlaceholder: 'انتخاب فصل',
|
||||
monthPlaceholder: 'انتخاب ماه',
|
||||
weekPlaceholder: 'انتخاب هفته',
|
||||
rangePlaceholder: ['تاریخ شروع', 'تاریخ پایان'],
|
||||
rangeYearPlaceholder: ['سال شروع', 'سال پایان'],
|
||||
rangeMonthPlaceholder: ['ماه شروع', 'ماه پایان'],
|
||||
rangeWeekPlaceholder: ['هفته شروع', 'هفته پایان'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/fi_FI'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/fi_FI'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Valitse päivä',
|
||||
rangePlaceholder: ['Alkamispäivä', 'Päättymispäivä'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/fr_BE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/fr_BE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
rangePlaceholder: ['Date de début', 'Date de fin'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/fr_CA'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/fr_CA'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
yearPlaceholder: 'Sélectionner une année',
|
||||
quarterPlaceholder: 'Sélectionner un trimestre',
|
||||
monthPlaceholder: 'Sélectionner un mois',
|
||||
weekPlaceholder: 'Sélectionner une semaine',
|
||||
rangePlaceholder: ['Date de début', 'Date de fin'],
|
||||
rangeYearPlaceholder: ['Année de début', 'Année de fin'],
|
||||
rangeMonthPlaceholder: ['Mois de début', 'Mois de fin'],
|
||||
rangeWeekPlaceholder: ['Semaine de début', 'Semaine de fin'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/fr_FR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/fr_FR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Sélectionner une date',
|
||||
yearPlaceholder: 'Sélectionner une année',
|
||||
quarterPlaceholder: 'Sélectionner un trimestre',
|
||||
monthPlaceholder: 'Sélectionner un mois',
|
||||
weekPlaceholder: 'Sélectionner une semaine',
|
||||
rangePlaceholder: ['Date de début', 'Date de fin'],
|
||||
rangeYearPlaceholder: ['Année de début', 'Année de fin'],
|
||||
rangeMonthPlaceholder: ['Mois de début', 'Mois de fin'],
|
||||
rangeWeekPlaceholder: ['Semaine de début', 'Semaine de fin'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ga_IE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ga_IE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Roghnaigh dáta',
|
||||
yearPlaceholder: 'Roghnaigh bliain',
|
||||
quarterPlaceholder: 'Roghnaigh ráithe',
|
||||
monthPlaceholder: 'Roghnaigh mí',
|
||||
weekPlaceholder: 'Roghnaigh seachtain',
|
||||
rangePlaceholder: ['Dáta tosaigh', 'Dáta deiridh'],
|
||||
rangeYearPlaceholder: ['Tús na bliana', 'Deireadh na bliana'],
|
||||
rangeMonthPlaceholder: ['Tosaigh mhí', 'Deireadh mhí'],
|
||||
rangeWeekPlaceholder: ['Tosaigh an tseachtain', 'Deireadh na seachtaine'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/gl_ES'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/gl_ES'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Escolla data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/he_IL'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/he_IL'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/hi_IN'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/hi_IN'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'तारीख़ चुनें',
|
||||
yearPlaceholder: 'वर्ष चुनें',
|
||||
quarterPlaceholder: 'तिमाही चुनें',
|
||||
monthPlaceholder: 'महीना चुनिए',
|
||||
weekPlaceholder: 'सप्ताह चुनें',
|
||||
rangePlaceholder: ['प्रारंभ तिथि', 'समाप्ति तिथि'],
|
||||
rangeYearPlaceholder: ['आरंभिक वर्ष', 'अंत वर्ष'],
|
||||
rangeMonthPlaceholder: ['आरंभिक महीना', 'अंत महीना'],
|
||||
rangeWeekPlaceholder: ['आरंभिक सप्ताह', 'अंत सप्ताह'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/hr_HR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/hr_HR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Odaberite datum',
|
||||
yearPlaceholder: 'Odaberite godinu',
|
||||
quarterPlaceholder: 'Odaberite četvrtinu',
|
||||
monthPlaceholder: 'Odaberite mjesec',
|
||||
weekPlaceholder: 'Odaberite tjedan',
|
||||
rangePlaceholder: ['Početni datum', 'Završni datum'],
|
||||
rangeYearPlaceholder: ['Početna godina', 'Završna godina'],
|
||||
rangeMonthPlaceholder: ['Početni mjesec', 'Završni mjesec'],
|
||||
rangeWeekPlaceholder: ['Početni tjedan', 'Završni tjedan'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/hu_HU'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/hu_HU'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Válasszon dátumot',
|
||||
rangePlaceholder: ['Kezdő dátum', 'Befejezés dátuma'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/id_ID'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/id_ID'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Pilih tanggal',
|
||||
rangePlaceholder: ['Mulai tanggal', 'Tanggal akhir'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/is_IS'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/is_IS'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Veldu dag',
|
||||
rangePlaceholder: ['Upphafsdagur', 'Lokadagur'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/it_IT'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/it_IT'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selezionare la data',
|
||||
rangePlaceholder: ["Data d'inizio", 'Data di fine'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ja_JP'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ja_JP'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,23 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ka_GE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ka_GE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'აირჩიეთ თარიღი',
|
||||
yearPlaceholder: 'აირჩიეთ წელი',
|
||||
quarterPlaceholder: 'აირჩიეთ მეოთხედი',
|
||||
monthPlaceholder: 'აირჩიეთ თვე',
|
||||
weekPlaceholder: 'აირჩიეთ კვირა',
|
||||
rangePlaceholder: ['საწყისი თარიღი', 'საბოლოო თარიღი'],
|
||||
rangeYearPlaceholder: ['საწყისი წელი', 'საბოლოო წელი'],
|
||||
rangeMonthPlaceholder: ['საწყისი თვე', 'საბოლოო თვე'],
|
||||
rangeWeekPlaceholder: ['საწყისი კვირა', 'საბოლოო კვირა'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/kk_KZ'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/kk_KZ'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Күнді таңдаңыз',
|
||||
yearPlaceholder: 'Жылды таңдаңыз',
|
||||
quarterPlaceholder: 'Тоқсанды таңдаңыз',
|
||||
monthPlaceholder: 'Айды таңдаңыз',
|
||||
weekPlaceholder: 'Аптаны таңдаңыз',
|
||||
rangePlaceholder: ['Бастау күні', 'Аяқталу күні'],
|
||||
rangeYearPlaceholder: ['Бастау жылы', 'Аяқталу жылы'],
|
||||
rangeMonthPlaceholder: ['Бастау айы', 'Аяқталу айы'],
|
||||
rangeWeekPlaceholder: ['Бастау апта', 'Аяқталу апта'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/km_KH'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/km_KH'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'រើសថ្ងៃ',
|
||||
yearPlaceholder: 'រើសឆ្នាំ',
|
||||
quarterPlaceholder: 'រើសត្រីមាស',
|
||||
monthPlaceholder: 'រើសខែ',
|
||||
weekPlaceholder: 'រើសសប្តាហ៍',
|
||||
rangePlaceholder: ['ថ្ងៃចាប់ផ្ដើម', 'ថ្ងៃបញ្ចប់'],
|
||||
rangeYearPlaceholder: ['ឆ្នាំចាប់ផ្ដើម', 'ឆ្នាំបញ្ចប់'],
|
||||
rangeMonthPlaceholder: ['ខែចាប់ផ្ដើម', 'ខែបញ្ចប់'],
|
||||
rangeWeekPlaceholder: ['សប្ដាហ៍ចាប់ផ្ដើម', 'សប្ដាហ៍បញ្ចប់'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,19 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/kmr_IQ'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/kmr_IQ'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Dîrok hilbijêre',
|
||||
rangePlaceholder: ['Dîroka destpêkê', 'Dîroka dawîn'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/kn_IN'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/kn_IN'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ko_KR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ko_KR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/lt_LT'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/lt_LT'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Pasirinkite datą',
|
||||
yearPlaceholder: 'Pasirinkite metus',
|
||||
quarterPlaceholder: 'Pasirinkite ketvirtį',
|
||||
monthPlaceholder: 'Pasirinkite mėnesį',
|
||||
weekPlaceholder: 'Pasirinkite savaitę',
|
||||
rangePlaceholder: ['Pradžios data', 'Pabaigos data'],
|
||||
rangeYearPlaceholder: ['Pradžios metai', 'Pabaigos metai'],
|
||||
rangeMonthPlaceholder: ['Pradžios mėnesis', 'Pabaigos mėnesis'],
|
||||
rangeWeekPlaceholder: ['Pradžios savaitė', 'Pabaigos savaitė'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/lv_LV'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/lv_LV'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Izvēlieties datumu',
|
||||
rangePlaceholder: ['Sākuma datums', 'Beigu datums'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/mk_MK'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/mk_MK'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ml_IN'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ml_IN'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'തിയതി തിരഞ്ഞെടുക്കുക',
|
||||
yearPlaceholder: 'വർഷം തിരഞ്ഞെടുക്കുക',
|
||||
quarterPlaceholder: 'ത്രൈമാസം തിരഞ്ഞെടുക്കുക',
|
||||
monthPlaceholder: 'മാസം തിരഞ്ഞെടുക്കുക',
|
||||
weekPlaceholder: 'വാരം തിരഞ്ഞെടുക്കുക',
|
||||
rangePlaceholder: ['ആരംഭ ദിനം', 'അവസാന ദിനം'],
|
||||
rangeYearPlaceholder: ['ആരംഭ വർഷം', 'അവസാന വർഷം'],
|
||||
rangeMonthPlaceholder: ['ആരംഭ മാസം', 'അവസാന മാസം'],
|
||||
rangeWeekPlaceholder: ['ആരംഭ വാരം', 'അവസാന വാരം'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/mn_MN'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/mn_MN'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
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
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ms_MY'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ms_MY'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Pilih tarikh',
|
||||
rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/nb_NO'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/nb_NO'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Velg dato',
|
||||
yearPlaceholder: 'Velg år',
|
||||
quarterPlaceholder: 'Velg kvartal',
|
||||
monthPlaceholder: 'Velg måned',
|
||||
weekPlaceholder: 'Velg uke',
|
||||
rangePlaceholder: ['Startdato', 'Sluttdato'],
|
||||
rangeYearPlaceholder: ['Startår', 'Sluttår'],
|
||||
rangeMonthPlaceholder: ['Startmåned', 'Sluttmåned'],
|
||||
rangeWeekPlaceholder: ['Start uke', 'Sluttuke'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/nl_BE'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/nl_BE'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
monthPlaceholder: 'Selecteer maand',
|
||||
placeholder: 'Selecteer datum',
|
||||
quarterPlaceholder: 'Selecteer kwartaal',
|
||||
rangeMonthPlaceholder: ['Begin maand', 'Eind maand'],
|
||||
rangePlaceholder: ['Begin datum', 'Eind datum'],
|
||||
rangeWeekPlaceholder: ['Begin week', 'Eind week'],
|
||||
rangeYearPlaceholder: ['Begin jaar', 'Eind jaar'],
|
||||
weekPlaceholder: 'Selecteer week',
|
||||
yearPlaceholder: 'Selecteer jaar',
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,27 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/nl_NL'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/nl_NL'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
monthPlaceholder: 'Selecteer maand',
|
||||
placeholder: 'Selecteer datum',
|
||||
quarterPlaceholder: 'Selecteer kwartaal',
|
||||
rangeMonthPlaceholder: ['Begin maand', 'Eind maand'],
|
||||
rangePlaceholder: ['Begin datum', 'Eind datum'],
|
||||
rangeWeekPlaceholder: ['Begin week', 'Eind week'],
|
||||
rangeYearPlaceholder: ['Begin jaar', 'Eind jaar'],
|
||||
weekPlaceholder: 'Selecteer week',
|
||||
yearPlaceholder: 'Selecteer jaar',
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/issues/424
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/pl_PL'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/pl_PL'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Wybierz datę',
|
||||
rangePlaceholder: ['Data początkowa', 'Data końcowa'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/pt_BR'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/pt_BR'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selecionar data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,47 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/pt_PT'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/pt_PT'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
...CalendarLocale,
|
||||
placeholder: 'Data',
|
||||
rangePlaceholder: ['Data inicial', 'Data final'],
|
||||
today: 'Hoje',
|
||||
now: 'Agora',
|
||||
backToToday: 'Hoje',
|
||||
ok: 'OK',
|
||||
clear: 'Limpar',
|
||||
month: 'Mês',
|
||||
year: 'Ano',
|
||||
timeSelect: 'Hora',
|
||||
dateSelect: 'Selecionar data',
|
||||
monthSelect: 'Selecionar mês',
|
||||
yearSelect: 'Selecionar ano',
|
||||
decadeSelect: 'Selecionar década',
|
||||
yearFormat: 'YYYY',
|
||||
dateFormat: 'D/M/YYYY',
|
||||
dayFormat: 'D',
|
||||
dateTimeFormat: 'D/M/YYYY HH:mm:ss',
|
||||
monthFormat: 'MMMM',
|
||||
monthBeforeYear: false,
|
||||
previousMonth: 'Mês anterior (PageUp)',
|
||||
nextMonth: 'Mês seguinte (PageDown)',
|
||||
previousYear: 'Ano anterior (Control + left)',
|
||||
nextYear: 'Ano seguinte (Control + right)',
|
||||
previousDecade: 'Última década',
|
||||
nextDecade: 'Próxima década',
|
||||
previousCentury: 'Último século',
|
||||
nextCentury: 'Próximo século'
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale,
|
||||
placeholder: 'Hora'
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
@@ -0,0 +1,20 @@
|
||||
import CalendarLocale from '@core/components/BaseDatePicker/src/vc-picker/locale/ro_RO'
|
||||
import TimePickerLocale from 'ant-design-vue/es/time-picker/locale/ro_RO'
|
||||
import type { PickerLocale } from '../generatePicker'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale: PickerLocale = {
|
||||
lang: {
|
||||
placeholder: 'Selectează data',
|
||||
rangePlaceholder: ['Data start', 'Data sfârșit'],
|
||||
...CalendarLocale
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale
|
||||
}
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user