为什么捐赠
API 资源管理器
QTime

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

提示

要处理日期和/或时间,还可以查看 Quasar 日期工具

正在加载 QTime API...

用法

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

基本

基本



横向模式



提示

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

功能

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

24 小时格式



点击“现在”按钮将时间设置为当前用户时间

现在按钮



禁用和只读



模型掩码

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

mask 属性令牌可以在 Quasar 工具 > 日期工具 中找到。

关于 SSR 的说明

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

关于波斯语日历的说明

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

简单掩码



如果要将字符串(包括 [] 字符)插入掩码中,请确保通过将它们括在 [] 中进行转义,否则这些字符可能会被解释为格式令牌。

带有转义字符的掩码



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

QDate 和 QTime 在同一模型上



自定义临时区域设置

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

自定义临时区域设置



着色

着色



强制暗模式



限制选项

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



与 QInput 一起使用

输入



在 QInput 上使用同一模型连接 QDate 和 QTime

QDate 和 QTime 与 QInput 一起使用



以下是 QInput maskrules 属性的**帮助器**。您可以为了方便使用这些帮助器,或者编写指定您 自定义需求 的字符串。

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

更多信息: QInput

带附加按钮

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

带附加按钮



原生表单提交

当处理具有actionmethod的原生表单时(例如,在使用 Quasar 与 ASP.NET 控制器时),你需要在 QTime 上指定name属性,否则 formData 将不会包含它(如果它应该包含)。

原生表单