DatePicker 日期选择器 ​

使用日期选择器来输入日期。

输入日期 ​

以「日」为基本单位的日期选择器。

其他日期单位 ​

通过扩展标准日期选择器组件，您可以选择周、月、年或多个日期。

日期范围 ​

支持选择日期范围。

月份范围 ​

支持选择月份范围。

年份范围 2.8.0 ​

支持选择年份范围。

默认值 ​

如果用户尚未选择日期，则默认显示今天的日历。您可以使用 default-value 来设置另一个日期。它的值应该可以被 new Date() 解析。

如果类型是 daterange，default-value 将设置左侧日历。

日期格式 ​

使用 format 属性可以控制输入框中显示的文本格式。 使用 value-format 属性可以控制绑定值的格式。

默认情况下，该组件接受并返回一个 Date 对象。

点击这里查看 Day.js 中所有可用的格式。

开始日期和结束日期的默认时间 ​

选择日期范围时，您可以为开始日期和结束日期指定时间部分。

设置自定义前缀内容 ​

前缀的内容可以自定义。

自定义内容 ​

单元格的内容可以自定义，在作用域插槽中您可以获取单元格数据。请注意，自定义内容结构应与默认结构保持一致，否则可能会出现样式错位。

自定义图标 2.8.0 ​

可以使用插槽来自定义图标。

有关数据详情，请参阅

interface DateCell {
  column: number
  customClass: string | undefined
  disabled: boolean
  end: boolean
  inRange: boolean
  row: number
  selected: Dayjs | undefined
  isCurrent: boolean | undefined
  isSelected: boolean
  renderText: string | undefined
  start: boolean
  text: number
  timestamp: number
  date: Date
  dayjs: Dayjs
  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

本地化 ​

默认的区域设置为英文，如果你需要使用其他语言，请参考 国际化

注意，日期时间区域设置 (月份名称、每周第一天等) 也在本地化配置中。

API ​

属性 ​

事件 ​

插槽 ​

暴露 ​

类型声明 ​

import type { Options as PopperOptions } from '@popperjs/core'

type TimeLikeType = 'datetime' | 'datetimerange'

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

来源 ​

组件 • 样式 • 文档

贡献者 ​