Used to combine multiple Picker components, allow users to select multiple value.
\nThe following components can be placed inside PickerGroup:
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\nPlace a DatePicker component and a TimePicker component in the default slot of the PickerGroup to select both a date and a time.
PickerGroup will render a unified toolbar, so the child components will not render is\'s toolbar, and the toolbar props and events need to be set to the PickerGroup, such as the title prop, confirm event, cancel event, etc. Other props and events in child components can be used as before.
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\nIn some scenarios, in order to ensure that users can select all Pickers in turn, you can set the next-step-text prop of PickerGroup. After setting the next-step-text prop, if the user has not switched to the last tab, the button in the upper right corner will become "Next Step", and automatically switch to the next Picker after clicking. When the user switches to the last tab, the button in the upper right corner changes to "Confirm".
<van-picker-group\n title="Title"\n :tabs="['Date', 'Time']"\n next-step-text="Next Step"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\nPlace two DatePicker components in the default slot of PickerGroup to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Date', 'End Date']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="startDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startDate = ref(['2022', '06', '01']);\n const endDate = ref(['2023', '06', '01']);\n\n const onConfirm = () => {\n showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\nPlace two TimePicker components in the default slot of PickerGroup to select the time range.
<van-picker-group\n title="Title"\n :tabs="['Start Time', 'End Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-time-picker v-model="startTime" />\n <van-time-picker v-model="endTime" />\n</van-picker-group>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const startTime = ref(['12', '00']);\n const endTime = ref(['12', '00']);\n\n const onConfirm = () => {\n showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n };\n\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\nSupports both uncontrolled and controlled modes:
\nv-model:active-tab is not bound, the PickerGroup component completely controls the tab switching.v-model:active-tab is bound, PickerGroup supports controlled mode, and the tab switching is controlled by both the v-model:active-tab value and the component itself.<van-button type="primary" @click="setActiveTab">\n toggle tab, current {{ activeTab }}\n</van-button>\n<van-picker-group\n v-model:active-tab="activeTab"\n title="Title"\n :tabs="['Date', 'Time']"\n @confirm="onConfirm"\n @cancel="onCancel"\n>\n <van-date-picker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n />\n <van-time-picker v-model="currentTime" />\n</van-picker-group>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const activeTab = ref(0);\n const currentDate = ref(['2022', '06', '01']);\n const currentTime = ref(['12', '00']);\n\n const setActiveTab = () => {\n activeTab.value = activeTab.value ? 0 : 1;\n };\n\n const onConfirm = () => {\n showToast(\n `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n );\n };\n const onCancel = () => {\n showToast('cancel');\n };\n\n return {\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 5, 1),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
v-model:active-tab v4.3.2 | \nSet index of active tab | \nnumber | string | \n0 | \n
| tabs | \nTitles of tabs | \nstring[] | \n[] | \n
| title | \nToolbar title | \nstring | \n\'\' | \n
next-step-text v4.0.8 | \nText of next step button | \nstring | \n\'\' | \n
| confirm-button-text | \nText of confirm button | \nstring | \nConfirm | \n
| cancel-button-text | \nText of cancel button | \nstring | \nCancel | \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
The component exports the following type definitions:
\nimport type { PickerGroupProps, PickerGroupThemeVars } from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-picker-group-background | \n--van-background-2 | \n- | \n