Vant Picker 与 DatePicker 选择器实战：级联数据与日期范围

// 单列
const cityColumns = [
  { text: '杭州', value: '330100' },
  { text: '宁波', value: '330200' },
  { text: '温州', value: '330300', disabled: true },
];

// 多列独立（星期 + 时段）
const weekColumns = [
  [{ text: '周一', value: '1' }, { text: '周二', value: '2' }],
  [{ text: '上午', value: 'am' }, { text: '下午', value: 'pm' }],
];

// 级联（children 逐层嵌套）
const areaColumns = [
  {
    text: '浙江', value: '33',
    children: [
      { text: '杭州', value: '3301',
        children: [{ text: '西湖区', value: '330106' }, { text: '余杭区', value: '330110' }] },
      { text: '温州', value: '3303',
        children: [{ text: '鹿城区', value: '330302' }] },
    ],
  },
];

<script setup lang="ts">
import { ref } from 'vue';
import { cityColumns } from '@/data/columns';

const showPicker = ref(false);
const fieldValue = ref('');
const pickerValue = ref<string[]>([]);

const onConfirm = ({ selectedValues, selectedOptions }: {
  selectedValues: (string | number)[];
  selectedOptions: { text?: string | number }[];
}) => {
  showPicker.value = false;
  pickerValue.value = selectedValues.map(String);
  fieldValue.value = String(selectedOptions[0]?.text ?? '');
};
</script>

<template>
  <van-field
    v-model="fieldValue"
    is-link readonly label="城市"
    placeholder="请选择城市"
    @click="showPicker = true"
  />
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
      :model-value="pickerValue"
      title="选择城市"
      :columns="cityColumns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup lang="ts">
const areaColumns = [
  {
    cityName: '浙江', code: '33',
    cities: [{ cityName: '杭州', code: '3301', cities: [{ cityName: '西湖区', code: '330106' }] }],
  },
];
const fieldNames = { text: 'cityName', value: 'code', children: 'cities' };

const onConfirm = ({ selectedOptions }) => {
  console.log(selectedOptions.map((o) => o.cityName));
};
</script>

<template>
  <van-picker
    title="选择地区"
    :columns="areaColumns"
    :columns-field-names="fieldNames"
    :loading="loading"
    @confirm="onConfirm"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const currentDate = ref(['2026', '11']);
const columnsType = ['year', 'month'];
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);

// 给选项加单位
const formatter = (type: string, option: { text: string }) => {
  if (type === 'year') option.text += '年';
  if (type === 'month') option.text += '月';
  return option;
};
</script>

<template>
  <van-date-picker
    v-model="currentDate"
    title="选择年月"
    :columns-type="columnsType"
    :min-date="minDate"
    :max-date="maxDate"
    :formatter="formatter"
    @confirm="({ selectedValues }) => console.log(selectedValues.join('-'))"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const start = ref(['2026', '11', '01']);
const end = ref(['2026', '11', '30']);
const active = ref<'start' | 'end' | null>(null);
const show = ref(false);

const current = computed({
  get: () => (active.value === 'start' ? start.value : end.value),
  set: (v) => (active.value === 'start' ? (start.value = v) : (end.value = v)),
});
const minDate = computed(() =>
  active.value === 'end'
    ? new Date(+start.value[0], +start.value[1] - 1, +start.value[2])
    : new Date(2020, 0, 1)
);
const maxDate = new Date(2030, 11, 31);

const open = (which: 'start' | 'end') => { active.value = which; show.value = true; };
</script>

<template>
  <van-field readonly is-link label="开始" :model-value="start.join('-')" @click="open('start')" />
  <van-field readonly is-link label="结束" :model-value="end.join('-')" @click="open('end')" />
  <van-popup v-model:show="show" round position="bottom">
    <van-date-picker
      v-model="current"
      title="选择日期"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="show = false"
      @cancel="show = false"
    />
  </van-popup>
</template>