QTime 组件提供了一种输入时间的方法。
提示
要处理日期和/或时间,还可以查看 Quasar 日期工具。
用法
请注意,模型仅为字符串。
基本
提示
对于横向模式,您可以将其与 $q.screen
一起使用以使 QTime 响应式。例如: :landscape="$q.screen.gt.xs"
。更多信息: Quasar 屏幕插件。
功能
24 小时格式根据您设置的 Quasar 语言包 应用,但您也可以强制使用它,如下例所示。
点击“现在”按钮将时间设置为当前用户时间
模型掩码
默认模型掩码为 HH:mm
(或在使用 with-seconds
属性时为 HH:mm:ss
),但是您也可以使用自定义掩码。
mask
属性令牌可以在 Quasar 工具 > 日期工具 中找到。
关于 SSR 的说明
在掩码中使用 x
或 X
(时间戳)可能会导致客户端上的水合错误,因为必须使用 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
属性,否则 formData 将不会包含它(如果它应该包含)。