Vuetify

商店

企业版

v-date-picker 是独立的组件,可用于许多现有的 Vuetify 组件。它为用户提供了一个选择 日期/月份 的可视化表示。

日期选择器有两种方向变化:纵向 (默认) 和横向。 默认情况下,它们在日期(对于日期选择器)或月份(对于月选择器)时发出 input 事件,但是使用 reactive 属性,即使单击 年/月 后,它们也可以更新模型。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

日期选择器颜色可以使用 colorheader-color 属性设置。如果没有提供 header-color 属性将使用 color 属性值。

您可以使用数组、对象和函数指定允许的日期。

您可以指定选择器的宽度或使其完全宽度。

The v-date-picker component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.

您可以观看 pickerDate,它是显示的 月份/年份(取决于选择器类型和活动视图),以便在更改时执行一些操作。

日期选择器通过 JavaScript Date 对象支持国际化。 使用 locale 属性指定 BCP 47 语言标签,然后使用first-day-of-week 属性设置一周的第一天。

您可以覆盖选择器中使用的默认图标。

可以通过添加 readonly 属性来禁用选择新日期。

默认情况下,使用轮廓按钮显示当前日期 - show-current 属性可让您删除边框或选择其他日期作为当前日期显示。

Handle events such as @click, @dblclick, @mouseenter, and more when interacting with date, month, and year buttons.

月份选择器有两种方向变化:纵向 (默认) 和横向。

月份选择器颜色可以使用 colorheader-color 属性设置。如果没有提供 header-color 属性将使用 color 属性值。

您可以使用数组、对象或函数指定允许的月份。

月份选择器现在可以使用 multiple 属性选择多个月。如果使用 multiple ,则月份选择器的模型是一个数组。

您可以指定选择器的宽度或使其完全宽度。

月份选择器支持通过 JavaScript 日期对象进行国际化。 使用 locale prop, 指定一个 BCP 47 语言标记, 然后使用 first day of week 属性, 设置星期的第一天。

您可以覆盖选择器中使用的默认图标。

可以通过添加 readonly 属性来禁用选择新日期。

默认情况下,使用轮廓按钮显示当前月份 - * show-current** 属性可让您删除边框或选择要显示为当前月份的其他月份。

将选择器集成到 v-text-field 中时,建议使用 readonly 属性。 这样可以防止移动键盘触发。 为了节省垂直空间,您还可以隐藏选择器标题。

选择器提供了一个插槽,您可以使用它来保存和取消功能。 这将保留一个旧值,如果用户取消,则可以替换该旧值。

如果您需要以自定义格式显示日期(不同于YYYY-MM-DD),您需要使用格式化函数。

也可以使用外部库(例如 Moment.js 或 date-fns)格式化日期

日期选择器使用 multiple 属性可以选择多个日期。如果使用 multiple,那么日期选择器期望它的模型是一个数组。

日期选择器可以使用 range 属性选择日期范围。 当使用 range 属性时,日期选择器它的模型为长度为 2 的数组或为空。

默认情况下,从年份选择器开始,限制日期范围并在选择日期后关闭选择器菜单,使之成为理想的生日选择器。

您可以使用数组,对象或函数指定事件。 要更改事件的默认颜色,请使用 event-color 属性。 如果您想显示多个事件指示器,则您的事件函数或对象可以返回颜色(material 或 css)数组。

将选择器集成到 v-text-field 中时,建议使用 readonly 属性。 这样可以防止移动键盘触发。 为了节省垂直空间,您还可以隐藏选择器标题。

选择器提供了一个插槽,您可以使用它来保存和取消功能。 这将保留一个旧值,如果用户取消,则可以替换该旧值。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!