PickerDate 日期选择器

介绍

日期选择器，用于选择年、月、日。

基础用法

通过 v-model 绑定当前选中日期，设置空数组时默认选中 今天。

<vd-picker-date v-model="date" title="基础用法" />

const date = ref([]);

自定义列类型

通过 columns-type 属性来控制选项的类型，支持以任意顺序对 year、month 和 day 进行排列组合。

<vd-picker-date
  v-model="date"
  title="自定义列"
  :columns-type="columnsType"
/>

import type { PickerDateColumnsType } from 'vital-design';

const date = ref([]);

const columnsType: PickerDateColumnsType = [
  'year',
  'month',
];

限制日期范围

通过 min-date 和 max-date 属性来设定可选的时间范围，支持 dayjs 日期。

<vd-picker-date
  v-model="date"
  title="限制日期范围"
  :min-date="limit.min"
  :max-date="limit.max"
/>

import dayjs from 'dayjs';

const date = ref([]);

// 字符日期
const limit = reactive({
  min: '2025-01-01',
  max: '2026-01-01',
});

// dayjs日期
const limit2 = reactive({
  min: dayjs().subtract(1, 'month'),
  max: dayjs().add(1 ,'month'),
});

格式化标签

通过 formatter 方法来格式化标签。

<vd-picker-date
  v-model="date"
  title="格式化标签"
  :formatter="dateOptionFormatter"
/>

import type { PickerDateFormatter } from 'vital-design';

const date = ref([]);

const dateOptionFormatter: PickerDateFormatter = (type, value) => {
  if (type === 'year') {
    return 'Y' + value;
  }

  if (type === 'month') {
    return 'M' + value;
  }

  if (type === 'day') {
    return 'D' + value;
  }

  return '';
}

过滤日期选项

通过 filter 方法来过滤日期选项。

<vd-picker-date
  v-model="date"
  title="过滤日期选项"
  :filter="dateOptionFilter"
/>

import type { PickerDateFilter } from 'vital-design';

const date = ref([]);

const dateOptionFilter: PickerDateFilter = (type, options, values) => {
  if (type === 'year') {
    return options.filter(({ value }) => ['2024', '2025'].includes(value));
  }

  if (type === 'month') {
    return options.filter(({ value }) => ['01', '03'].includes(value));
  }

  if (type === 'day') {
    return options.filter(({ value }) => ['01', '15'].includes(value));
  }

  return options;
}

API

Props

参数	说明	类型	默认值
v-model	选中值	(string | number)[]	-
min-date	最小日期	string | number | Date | dayjs.Dayjs	十年前
max-date	最大日期	string | number | Date | dayjs.Dayjs	十年后
columns-type	选项类型	'year' | 'month' | 'day'	['year', 'month', 'day']
filter	过滤选项方法	PickerDateFilter	-
formatter	格式化标签方法	PickerDateFormatter	-
title	标题	string	-
confirm-button-text	确认按钮文字	string	-
cancel-button-text	取消按钮文字	string	-
immediate-change	是否在手指松开时立即触发 change 事件	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	PickerDateSelectedChangeData
updated	更新时触发	PickerDateSelectedData
confirm	确认时触发	PickerDateSelectedData
cancel	取消时触发	PickerDateSelectedData

Slots

名称	说明
toolbar	工具栏