Vuetify

商店

企业版

v-time-picker 是独立的组件,可用于许多现有的 Vuetify 组件。它为用户提供了选择时间的可视化表示。

时间选择器默认情况下启用了浅色主题。

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

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

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

您无法与禁用的选择器互动。

只读选择器的行为与禁用的一样,但看起来像默认的。

时间选择器可以切换到 24 小时格式。注意 format 属性只定义了选择器显示的方式,选择器的值(模型)总是 24 小时格式。

您可以使用数组,对象和函数指定允许的时间。 您还可以指定时间 步长/精度/间隔 - 例如 10 分钟。

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

Emphasize the v-time-picker component by providing an elevation from 0 to 24. Elevation modifies the box-shadow css property.

您可以移动 AM/PM 切换到选择器的标题。

您可以删除选择器的标题。

时间选择器可以输入秒数。

您可以使用鼠标滚轮编辑时间选择器的值。

由于选择器的灵活性,您可以真正按照自己的意愿进行输入。

这是使用 minmax 属性将选择器连接在一起的示例。

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