diff --git a/packages/vant/src/date-picker/README.md b/packages/vant/src/date-picker/README.md index a89add262..0c0cc33d9 100644 --- a/packages/vant/src/date-picker/README.md +++ b/packages/vant/src/date-picker/README.md @@ -56,7 +56,7 @@ For example: title="Choose Year-Month" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -65,11 +65,13 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 5, 1), currentDate, + columnsType, }; }, }; @@ -84,7 +86,7 @@ export default { :min-date="minDate" :max-date="maxDate" :formatter="formatter" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -93,7 +95,8 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; const formatter = (type, val) => { if (type === 'year') { @@ -110,6 +113,7 @@ export default { maxDate: new Date(2025, 5, 1), formatter, currentDate, + columnsType, }; }, }; @@ -124,7 +128,7 @@ export default { :filter="filter" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -133,7 +137,8 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; const filter = (type, options) => { if (type === 'month') { return options.filter((option) => Number(option.value) % 6 === 0); @@ -146,6 +151,7 @@ export default { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 5, 1), currentTime, + columnsType, }; }, }; diff --git a/packages/vant/src/date-picker/README.zh-CN.md b/packages/vant/src/date-picker/README.zh-CN.md index e6f9032d3..256716b76 100644 --- a/packages/vant/src/date-picker/README.zh-CN.md +++ b/packages/vant/src/date-picker/README.zh-CN.md @@ -58,7 +58,7 @@ export default { title="选择年月" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -67,11 +67,13 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 5, 1), currentDate, + columnsType, }; }, }; @@ -88,7 +90,7 @@ export default { :min-date="minDate" :max-date="maxDate" :formatter="formatter" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -97,7 +99,8 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; const formatter = (type, val) => { if (type === 'year') { @@ -114,6 +117,7 @@ export default { maxDate: new Date(2025, 5, 1), formatter, currentDate, + columnsType, }; }, }; @@ -130,7 +134,7 @@ export default { :filter="filter" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> ``` @@ -139,7 +143,8 @@ import { ref } from 'vue'; export default { setup() { - const currentDate = ref(['2021', '01', '01']); + const currentDate = ref(['2021', '01']); + const columnsType = ['year', 'month']; const filter = (type, options) => { if (type === 'month') { return options.filter((option) => Number(option.value) % 6 === 0); @@ -152,6 +157,7 @@ export default { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 5, 1), currentTime, + columnsType, }; }, }; diff --git a/packages/vant/src/date-picker/demo/index.vue b/packages/vant/src/date-picker/demo/index.vue index 297f6d6d4..5b4dd2127 100644 --- a/packages/vant/src/date-picker/demo/index.vue +++ b/packages/vant/src/date-picker/demo/index.vue @@ -3,6 +3,7 @@ import VanDatePicker from '..'; import { ref } from 'vue'; import { useTranslate } from '../../../docs/site/use-translate'; import type { PickerOption } from '../../picker'; +import { DatePickerColumnType } from '../DatePicker'; const t = useTranslate({ 'zh-CN': { @@ -30,9 +31,11 @@ const t = useTranslate({ const minDate = new Date(2020, 0, 1); const maxDate = new Date(2025, 5, 1); const basicDate = ref(['2021', '01', '01']); -const yearMonthDate = ref(['2021', '01', '01']); -const formatterDate = ref(['2021', '01', '01']); -const filterDate = ref(['2021', '01', '01']); +const yearMonthDate = ref(['2021', '01']); +const formatterDate = ref(['2021', '01']); +const filterDate = ref(['2021', '01']); + +const columnsType: DatePickerColumnType[] = ['year', 'month']; const filter = (type: string, options: PickerOption[]) => { if (type === 'month') { @@ -71,7 +74,7 @@ const formatter = (type: string, option: PickerOption) => { :title="t('chooseYearMonth')" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> @@ -82,7 +85,7 @@ const formatter = (type: string, option: PickerOption) => { :min-date="minDate" :max-date="maxDate" :formatter="formatter" - :columns-type="['year', 'month']" + :columns-type="columnsType" /> @@ -93,7 +96,7 @@ const formatter = (type: string, option: PickerOption) => { :filter="filter" :min-date="minDate" :max-date="maxDate" - :columns-type="['year', 'month']" + :columns-type="columnsType" />