docs(DatePicker): fix currentDate of year-month

This commit is contained in:
chenjiahan 2022-02-16 10:56:46 +08:00
parent fdcf9931be
commit c942efb76b
3 changed files with 33 additions and 18 deletions

View File

@ -56,7 +56,7 @@ For example:
title="Choose Year-Month" title="Choose Year-Month"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -65,11 +65,13 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
currentDate, currentDate,
columnsType,
}; };
}, },
}; };
@ -84,7 +86,7 @@ export default {
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:formatter="formatter" :formatter="formatter"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -93,7 +95,8 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
const formatter = (type, val) => { const formatter = (type, val) => {
if (type === 'year') { if (type === 'year') {
@ -110,6 +113,7 @@ export default {
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
formatter, formatter,
currentDate, currentDate,
columnsType,
}; };
}, },
}; };
@ -124,7 +128,7 @@ export default {
:filter="filter" :filter="filter"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -133,7 +137,8 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
const filter = (type, options) => { const filter = (type, options) => {
if (type === 'month') { if (type === 'month') {
return options.filter((option) => Number(option.value) % 6 === 0); return options.filter((option) => Number(option.value) % 6 === 0);
@ -146,6 +151,7 @@ export default {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
currentTime, currentTime,
columnsType,
}; };
}, },
}; };

View File

@ -58,7 +58,7 @@ export default {
title="选择年月" title="选择年月"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -67,11 +67,13 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
currentDate, currentDate,
columnsType,
}; };
}, },
}; };
@ -88,7 +90,7 @@ export default {
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:formatter="formatter" :formatter="formatter"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -97,7 +99,8 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
const formatter = (type, val) => { const formatter = (type, val) => {
if (type === 'year') { if (type === 'year') {
@ -114,6 +117,7 @@ export default {
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
formatter, formatter,
currentDate, currentDate,
columnsType,
}; };
}, },
}; };
@ -130,7 +134,7 @@ export default {
:filter="filter" :filter="filter"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
``` ```
@ -139,7 +143,8 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const currentDate = ref(['2021', '01', '01']); const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
const filter = (type, options) => { const filter = (type, options) => {
if (type === 'month') { if (type === 'month') {
return options.filter((option) => Number(option.value) % 6 === 0); return options.filter((option) => Number(option.value) % 6 === 0);
@ -152,6 +157,7 @@ export default {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 5, 1), maxDate: new Date(2025, 5, 1),
currentTime, currentTime,
columnsType,
}; };
}, },
}; };

View File

@ -3,6 +3,7 @@ import VanDatePicker from '..';
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate'; import { useTranslate } from '../../../docs/site/use-translate';
import type { PickerOption } from '../../picker'; import type { PickerOption } from '../../picker';
import { DatePickerColumnType } from '../DatePicker';
const t = useTranslate({ const t = useTranslate({
'zh-CN': { 'zh-CN': {
@ -30,9 +31,11 @@ const t = useTranslate({
const minDate = new Date(2020, 0, 1); const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 5, 1); const maxDate = new Date(2025, 5, 1);
const basicDate = ref(['2021', '01', '01']); const basicDate = ref(['2021', '01', '01']);
const yearMonthDate = ref(['2021', '01', '01']); const yearMonthDate = ref(['2021', '01']);
const formatterDate = ref(['2021', '01', '01']); const formatterDate = ref(['2021', '01']);
const filterDate = ref(['2021', '01', '01']); const filterDate = ref(['2021', '01']);
const columnsType: DatePickerColumnType[] = ['year', 'month'];
const filter = (type: string, options: PickerOption[]) => { const filter = (type: string, options: PickerOption[]) => {
if (type === 'month') { if (type === 'month') {
@ -71,7 +74,7 @@ const formatter = (type: string, option: PickerOption) => {
:title="t('chooseYearMonth')" :title="t('chooseYearMonth')"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
</demo-block> </demo-block>
@ -82,7 +85,7 @@ const formatter = (type: string, option: PickerOption) => {
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:formatter="formatter" :formatter="formatter"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
</demo-block> </demo-block>
@ -93,7 +96,7 @@ const formatter = (type: string, option: PickerOption) => {
:filter="filter" :filter="filter"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:columns-type="['year', 'month']" :columns-type="columnsType"
/> />
</demo-block> </demo-block>
</template> </template>