日期选择器

v-date-picker 是一个功能齐全的日期选择组件。

TIP

此特性在 v3.4.0 (Blackguard) 版本引入。

使用

日期选择器有两种方向变体：纵向（默认）和横向。默认情况下，当选择日期（对于日期选择器）或月份（对于月份选择器）时，它们会触发输入事件，但通过使用 reactive 属性，它们可以在点击年份或月份后立即更新模型。

API

组件	描述
v-date-picker	主要组件

指南

v-date-picker 组件是一个独立的界面，允许选择日期、月份和年份。这个组件是使用Date composable构建的。

所有日期组件都支持 date-io 抽象层来进行日期管理。默认情况下，它们将使用一个内置适配器，该适配器使用原生的 Date 对象，但也可以使用任何 date-io 适配器。请参阅日期页面获取更多信息。

import DayJsAdapter from '@date-io/dayjs'

createVuetify({
  date: {
    adapter: DayJsAdapter,
  },
})

属性

v-date-picker 组件支持多个属性，用于配置可选择的日期、日期格式、翻译等。

视觉高度

v-date-picker 组件支持高度增加，最大值为 24。有关高度增加的更多信息，请访问官方 Material Design 高度增加页面。

宽度

您可以指定选择器的宽度，也可以将其设为全宽。

显示相邻月份

默认情况下，来自前一个月和下一个月的日期是不可见的。可以使用 show-adjacent-months 属性来显示它们。

颜色

日期选择器的颜色可以使用 color 属性来设置。

允许的日期

Specify allowed dates using objects or functions. When using objects, accepts a date string in the format of YYYY-MM-DD. When using functions, accepts a date object as a parameter and should return a boolean. 使用对象或函数来指定允许的日期。当使用对象时，接受格式为 YYYY-MM-DD 的日期字符串。当使用函数时，接受一个日期对象作为参数，并应返回一个布尔值。

国际化

Vuetify 组件可以通过利用 i18n 功能来本地化日期格式。这确定了日期显示的适当区域设置。当使用默认的日期适配器时，本地化会自动管理。

对于不使用默认日期适配器的情况，你需要在 i18n 区域设置字符串和你选择的日期库的区域设置之间创建映射关系。这可以在 Vuetify 选项中完成，如下所示：

import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import svSE from 'date-fns/locale/sv'

createVuetify({
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      sv: svSE,
    },
  },
})

解析日期

建议在使用字符串日期时，使用 Date 可组合函数 进行解析和格式化。以下示例使用 parseISO 函数将字符串日期转换为 Date 对象。

import { useDate } from 'vuetify'

const adapter = useDate()
const date = '2023-11-30'

console.log(new Date(date)) // Wed Nov 29 2023 18:00:00 GMT-0600
console.log(adapter.parseISO(date)) // Thu Nov 30 2023 00:00:00 GMT-0600

使用这个函数可以确保日期在解析时不受用户时区的影响。