Used to select date, usually used with the Popup component.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { DatePicker } from 'vant';\n\nconst app = createApp();\napp.use(DatePicker);\n<van-date-picker\n v-model="currentDate"\n title="Choose Date"\n :min-date="minDate"\n :max-date="maxDate"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01', '01']);\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n };\n },\n};\nUsing columns-type prop to control the type of columns.
For example:
\n[\'year\'] to select year.[\'month\'] to select month.[\'year\', \'month\'] to select year and month.[\'month\', \'day\'] to select month and day.<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n columnsType,\n };\n },\n};\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :min-date="minDate"\n :max-date="maxDate"\n :formatter="formatter"\n :columns-type="columnsType"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n\n const formatter = (type, option) => {\n if (type === 'year') {\n option.text += ' Year';\n }\n if (type === 'month') {\n option.text += 'Month';\n }\n return option;\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n formatter,\n currentDate,\n columnsType,\n };\n },\n};\n<van-date-picker\n v-model="currentDate"\n title="Choose Year-Month"\n :filter="filter"\n :min-date="minDate"\n :max-date="maxDate"\n :columns-type="columnsType"\n/>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const currentDate = ref(['2021', '01']);\n const columnsType = ['year', 'month'];\n const filter = (type, options) => {\n if (type === 'month') {\n return options.filter((option) => Number(option.value) % 6 === 0);\n }\n return options;\n };\n\n return {\n filter,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentTime,\n columnsType,\n };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model | \nCurrent date | \nstring[] | \n[] | \n
| columns-type | \nColumns type | \nstring[] | \n[\'year\', \'month\', \'day\'] | \n
| min-date | \nMin date | \nDate | \nTen years ago on January 1 | \n
| max-date | \nMax date | \nDate | \nTen years later on December 31 | \n
| title | \nToolbar title | \nstring | \n\'\' | \n
| confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
| cancel-button-text | \nText of cancel button | \nstring | \nCancel | \n
| show-toolbar | \nWhether to show toolbar | \nboolean | \ntrue | \n
| loading | \nWhether to show loading prompt | \nboolean | \nfalse | \n
| readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
| filter | \nOption filter | \n(type: string, options: PickerOption[]) => PickerOption[] | \n- | \n
| formatter | \nOption formatter | \n(type: string, option: PickerOption) => PickerOption | \n- | \n
| option-height | \nOption height, supports px vw vh rem unit, default px | \nnumber | string | \n44 | \n
| visible-option-num | \nCount of visible columns | \nnumber | string | \n6 | \n
| swipe-duration | \nDuration of the momentum animation, unit ms | \nnumber | string | \n1000 | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| confirm | \nEmitted when the confirm button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
| cancel | \nEmitted when the cancel button is clicked | \n{ selectedValues, selectedOptions, selectedIndexes } | \n
| change | \nEmitted when current option is changed | \n{ selectedValues, selectedOptions, selectedIndexes, columnIndex } | \n
| Name | \nDescription | \nSlotProps | \n
|---|---|---|
| toolbar | \nCustom toolbar content | \n- | \n
| title | \nCustom title | \n- | \n
| confirm | \nCustom confirm button text | \n- | \n
| cancel | \nCustom cancel button text | \n- | \n
| option | \nCustom option content | \noption: PickerOption, index: number | \n
| columns-top | \nCustom content above columns | \n- | \n
| columns-bottom | \nCustom content below columns | \n- | \n
Use ref to get Picker instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| confirm | \nStop scrolling and emit confirm event | \n- | \n- | \n
| getSelectedDate | \nGet current selected date | \n- | \nstring[] | \n
The component exports the following type definitions:
\nimport type {\n DatePickerProps,\n DatePickerColumnType,\n DatePickerInstance,\n} from 'vant';\nDatePickerInstance is the type of component instance:
import { ref } from 'vue';\nimport type { DatePickerInstance } from 'vant';\n\nconst datePickerRef = ref<DatePickerInstance>();\n\ndatePickerRef.value?.confirm();\n