PickerGroup - Vant 4

PickerGroup

Intro

Used to combine multiple Picker components, allow users to select multiple value.

The following components can be placed inside PickerGroup:

• Picker

• Area

• DatePicker

• TimePicker

• Other custom components based on Picker component

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { PickerGroup } from'vant'; const app = createApp(); app.use(PickerGroup);

Usage

Select Date Time

Place 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.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const currentDate = ref(['2022', '06', '01']); const currentTime = ref(['12', '00']); constonConfirm = () => { showToast( `${currentDate.value.join('/')}${currentTime.value.join(':')}`, ); }; constonCancel = () => { showToast('cancel'); }; return { minDate: newDate(2020, 0, 1), maxDate: newDate(2025, 5, 1), currentDate, currentTime, onConfirm, onCancel, }; }, };

Next Step Button

In 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".

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const currentDate = ref(['2022', '06', '01']); const currentTime = ref(['12', '00']); constonConfirm = () => { showToast( `${currentDate.value.join('/')}${currentTime.value.join(':')}`, ); }; constonCancel = () => { showToast('cancel'); }; return { minDate: newDate(2020, 0, 1), maxDate: newDate(2025, 5, 1), currentDate, currentTime, onConfirm, onCancel, }; }, };

Select Date Range

Place two DatePicker components in the default slot of PickerGroup to select the time range.

import { computed, ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const startDate = ref(['2022', '06', '01']); const endDate = ref(['2023', '06', '01']); const endMinDate = computed( () =>newDate( Number(startDate.value[0]), Number(startDate.value[1]) - 1, Number(startDate.value[2]), ), ); constonConfirm = () => { showToast(`${startDate.value.join('/')}${endDate.value.join('/')}`); }; constonCancel = () => { showToast('cancel'); }; return { minDate: newDate(2020, 0, 1), maxDate: newDate(2025, 5, 1), endMinDate, endDate, startDate, onConfirm, onCancel, }; }, };

Select Time Range

Place two TimePicker components in the default slot of PickerGroup to select the time range.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const startTime = ref(['12', '00']); const endTime = ref(['12', '00']); constonConfirm = () => { showToast(`${startTime.value.join(':')}${endTime.value.join(':')}`); }; constonCancel = () => { showToast('cancel'); }; return { endTime, startTime, onConfirm, onCancel, }; }, };

Controlled Mode

Supports both uncontrolled and controlled modes:

• When v-model:active-tab is not bound, the PickerGroup component completely controls the tab switching.
• When 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.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const activeTab = ref(0); const currentDate = ref(['2022', '06', '01']); const currentTime = ref(['12', '00']); constsetActiveTab = () => { activeTab.value = activeTab.value ? 0 : 1; }; constonConfirm = () => { showToast( `${currentDate.value.join('/')}${currentTime.value.join(':')}`, ); }; constonCancel = () => { showToast('cancel'); }; return { minDate: newDate(2020, 0, 1), maxDate: newDate(2025, 5, 1), activeTab, currentDate, currentTime, setActiveTab, onConfirm, onCancel, }; }, };

API

Props

Attribute	Description	Type	Default
v-model:active-tab v4.3.2	Set index of active tab	*number	string*
tabs	Titles of tabs	string[]	[]
title	Toolbar title	string	''
show-toolbar	Whether to show toolbar	boolean	true
next-step-text v4.0.8	Text of next step button	string	''
confirm-button-text	Text of confirm button	string	Confirm
cancel-button-text	Text of cancel button	string	Cancel

Slots

Name	Description	SlotProps
toolbar	Custom toolbar content	-
title	Custom title	-
confirm	Custom confirm button text	-
cancel	Custom cancel button text	-

Types

The component exports the following type definitions:

importtype { PickerGroupProps, PickerGroupThemeVars } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-picker-group-background	--van-background-2	-