QTime

QTime组件提供了一种输入时间的方法。

TIP

有关处理日期和/或时间的信息,请同时查看Quasar日期实用程序.

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

请注意,该模型仅为字符串。

基础

Basic
Landscape

TIP

对于横向模式,可以将其与$q.screen结合使用以使QTime响应。 例如::landscape="$q.screen.gt.xs"。 更多信息:Quasar屏幕插件

功能性

根据您设置的Quasar语言包应用24小时格式,但也可以强制使用它,如以下示例所示。

24h format

单击“Now”按钮将时间设置为当前用户时间:

Now button
Disable and readonly

模型掩码

默认的模型掩码为HH:mm(或使用with-seconds属性时为HH:mm:ss),但是您也可以使用自定义掩码。

可以在Quasar实用程序>日期实用程序中找到mask属性令牌。

SSR的说明

在掩码中使用xX(时间戳)可能会导致客户端发生水化错误,因为对字符串模型的解码必须使用考虑了本地时区的new Date()来完成。结果,如果服务器所在的时区与客户端不同,则服务器的渲染输出将与客户端上的输出不同,因此水化将失败。

波斯日历的说明

使用波斯日历时,QTime的掩码被强制为HH:mmHH:mm:ss(如果指定了with-seconds)。

Simple mask

如果要在掩码中插入字符串,请确保通过用[]将它们括起来来转义它们,否则这些字符可能会被解释为格式标记。

Mask with escaped characters

使用掩码将QDate和QTime连接到同一模型:

QDate and QTime on same model

自定义临时语言环境

如果由于某种原因,您需要使用自定义的临时语言环境而不是已设置的当前Quasar语言包,则可以使用locale属性:

Custom ad-hoc locale

着色

Coloring
Dark

限制选项

  • 您可以使用hour-optionsminute-optionssecond-options属性将用户选择限制在特定时间。
  • 另外,为了更深入地限制选项,您还可以为options-fn属性提供一个函数(下面的第二个示例)。
Options

使用QInput

Input

在QInput上连接具有相同模型的QDate和QTime:

QDate and QTime with QInput

QInput的maskrules属性有辅助器。为了方便起见,可以使用它们或写出指定您的自定义需求的字符串。

例子: “date”、 “time”、 “fulltime”。

更多信息: QInput

带有额外按钮

您可以使用默认插槽添加按钮:

With additional buttons

QTime API

Loading API...
Please wait...