QTime
QTime 组件提供了输入时间的方法。
TIP
有关处理日期和/或时间,也可以查看 Quasar 日期实用程序。
QTime API
用法
请注意,该 model 是一个字符串。
基础
TIP
对于横向模式,您可以将其与 $q.screen
一起使用。以使 QTime 变成响应式的。示例::landscape="$q.screen.gt.xs"
。更多信息:Quasar Screen Plugin。
功能
24 小时格式的应用取决于您设置的 Quasar 语言包,但您也可以强制使用,如下面的示例所示。
单击 “Now” 按钮将时间设置为当前用户时间:
Model 掩码
默认的 model 数据掩码是 HH:mm
(设置了with-seconds
的话为 HH:mm:ss
),然而您也可以使用自定义掩码。
mask
可以在 Quasar Utils > Date utils 页面中找到。
SSR 的注意事项
在掩码中使用 x
或 X
(时间戳)可能会在客户端上造成水合错误,因为解码 model 字符串必须使用考虑到本地时区的 new Date()
完成。因此,如果服务器与客户端处于不同的时区,则服务器的渲染输出将与客户端的不同,因此水合将失败。
波斯日历的注意事项
使用波斯日历时,QTime 的掩码强制为 HH:mm
或 HH:mm:ss
(如果指定了 with-seconds
)。
如果您想在掩码中插入字符串(包括[
和 ]
字符),请确保用[
和 ]
将其转义,否则这些字符可能会被解释为格式标记。
使用掩码将 QDate 和 QTime 连接到同一模型:
自定义特殊语言环境
如果出于某种原因,您需要使用自定义的特殊语言环境,而不是已设置的当前 Quasar 语言包,您可以使用 locale
属性:
着色
限制选项
- 您可以使用
hour-options
,minute-options
和second-options
属性将用户选择限制在特定时间。 - 或者,为了更深入地限制选项,您还可以为使用
options-fn
提供一个函数(下面的第二个示例)。
搭配 QInput
在 QInput 上用相同的模型连接 QDate 和 QTime:
这里有一些可以用在 QInput 的 mask
和 rules
中的工具。为了方便起见,您可以使用它们,也可以编写指定自定义需求的字符串。
例如: “date”, “time”, “fulltime”.
更多信息: QInput.
附加在按钮上
您可以使用默认插槽附加在按钮上:
原生表单提交
当处理一个带有 action
和 method
的原生表单时(如:使用 Quasar 和 ASP.NET 控制器时),您需要为 QTime 声明 name
属性,否则表单数据中不会包含它: