QTime

Form Components 表单组件
Date Picker 日期选择器
Quasar 工具函数
时间工具
Form Components 表单组件
Field 字段

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

TIP

有关处理日期和/或时间，也可以查看 Quasar 日期实用程序。

QTime API

QTime API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用
landscape
: Boolean
说明
在横向模式下显示组件
format24h
: Boolean | null
说明
强制显示24小时制而不是AM/PM制度
options
: (hr, min, sec) => Boolean | null | undefined
说明
可选地配置用户允许设置的时间；如果设置了 'hour-options'、'minute-options' 和 'second-options'，则会被覆盖；为了获得最佳性能，请从您的作用域中引用它，而不要内联定义。
hour-options
: Array
说明
可选地配置用户允许设置的小时；如果还设置了 'options' 属性，则会覆盖该属性。
minute-options
: Array
说明
可选地配置用户允许设置的分钟数；如果还设置了 'options' 属性，则会覆盖该属性。
second-options
: Array
说明
可选地配置用户允许设置的秒数；如果还设置了 'options' 属性，则会覆盖该属性。
with-seconds
: Boolean
说明
允许设置带有秒的时间

用法

请注意,该 model 是一个字符串。

基础

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-time v-model="time" />

      <q-time
        v-model="timeWithSeconds"
        with-seconds
      />
    </div>
  </div>
</template>
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
9
:
24
:
10
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-time
        v-model="time"
        landscape
      />

      <q-time
        v-model="timeWithSeconds"
        with-seconds
        landscape
      />
    </div>
  </div>
</template>
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
9
:
24
:
10
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

TIP

对于横向模式，您可以将其与 $q.screen 一起使用。以使 QTime 变成响应式的。示例：:landscape="$q.screen.gt.xs"。更多信息：Quasar Screen Plugin。

功能

24 小时格式的应用取决于您设置的 Quasar 语言包，但您也可以强制使用，如下面的示例所示。

<template>
  <div class="q-pa-md">
    <q-time
      v-model="time"
      format24h
    />
  </div>
</template>
19
:
42
00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

<template>
  <div class="q-pa-md">
    <q-time
      v-model="time"
      now-btn
    />
  </div>
</template>
4
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-time
        v-model="time"
        disable
      />

      <q-time
        v-model="time"
        readonly
      />
    </div>
  </div>
</template>
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

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）。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <div>
        <div class="q-pb-sm q-gutter-sm">
          <q-badge color="teal">
            Model: {{ model1 }}
          </q-badge>
          <q-badge color="purple" text-color="white">
            Mask: hh:mm A
          </q-badge>
        </div>

        <q-time v-model="model1" mask="hh:mm A" />
      </div>

      <div>
        <div class="q-pb-sm q-gutter-sm">
          <q-badge color="teal">
            Model: {{ model2 }}
          </q-badge>
          <q-badge color="purple" text-color="white">
            Mask: HH*mm**ss
          </q-badge>
        </div>

        <q-time v-model="model2" mask="HH*mm**ss" with-seconds />
      </div>
    </div>
  </div>
</template>
Model: 01:51 PM
Mask: hh:mm A
1
:
51
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
Model: 08*22**10
Mask: HH*mm**ss
8
:
22
:
10
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

如果您想在掩码中插入字符串（包括[和 ] 字符），请确保用[ 和 ]将其转义，否则这些字符可能会被解释为格式标记。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-badge color="teal">
        Model: {{ model }}
      </q-badge>
      <q-badge color="purple" text-color="white">
        Mask: hh[h and ]mm[ minutes (]A)
      </q-badge>
    </div>

    <div class="q-mt-sm">
      <q-time v-model="model" mask="hh[h and ]mm[ minutes (]A)" />
    </div>
  </div>
</template>
Model: 10h and 20 minutes (AM)
Mask: hh[h and ]mm[ minutes (]A)
10
:
20
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

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

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-badge color="teal">
        Model: {{ model }}
      </q-badge>
      <q-badge color="purple" text-color="white" class="q-ma-md">
        Mask: YYYY-MM-DD HH:mm
      </q-badge>
    </div>

    <div class="q-gutter-md row items-start">
      <q-date v-model="model" mask="YYYY-MM-DD HH:mm" color="purple" />
      <q-time v-model="model" mask="YYYY-MM-DD HH:mm" color="purple" />
    </div>
  </div>
</template>
Model: 2019-02-22 21:02
Mask: YYYY-MM-DD HH:mm
2019
2月22日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
9
:
02
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

自定义特殊语言环境

如果出于某种原因，您需要使用自定义的特殊语言环境，而不是已设置的当前 Quasar 语言包，您可以使用 locale 属性：

<template>
  <div class="q-pa-md">
    <div class="q-pb-sm">
      <q-badge color="teal">
        Model: {{ model }}
      </q-badge>
    </div>

    <q-time v-model="model" mask="MMMM D, YYYY - HH:mm" :locale="myLocale" />
  </div>
</template>
Model: Febrero 22, 2019 - 21:02
9
:
02
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

着色

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-time
        v-model="time"
        color="orange"
      />

      <q-time
        v-model="time"
        color="yellow"
        text-color="black"
      />
    </div>
  </div>
</template>
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <div class="q-gutter-md">
      <q-time
        v-model="time"
        dark
        bordered
      />

      <q-time
        v-model="time"
        color="orange"
        text-color="black"
        dark
        bordered
      />
    </div>
  </div>
</template>
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

限制选项

  • 您可以使用 hour-options，minute-options 和 second-options 属性将用户选择限制在特定时间。
  • 或者，为了更深入地限制选项，您还可以为使用 options-fn 提供一个函数（下面的第二个示例）。
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-time
        v-model="time1"
        :hour-options="hourOptionsTime1"
        :minute-options="minuteOptionsTime1"
        :second-options="secondOptionsTime1"
        with-seconds
      />

      <q-time
        v-model="time2"
        :options="optionsFnTime2"
        with-seconds
      />

      <q-time
        v-model="time3"
        :options="optionsFnTime3"
      />
    </div>
  </div>
</template>
10
:
45
:
40
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
2
:
27
:
20
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
10
:
56
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

搭配 QInput

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm row">
      <q-input filled v-model="time" mask="time" :rules="['time']">
        <template v-slot:append>
          <q-icon name="access_time" class="cursor-pointer">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-time v-model="time">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-time>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>

      <q-input filled v-model="timeWithSeconds" mask="fulltime" :rules="['fulltime']">
        <template v-slot:append>
          <q-icon name="access_time" class="cursor-pointer">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-time
                v-model="timeWithSeconds"
                with-seconds
                format24h
              >
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-time>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
  </div>
</template>

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

<template>
  <div class="q-pa-md" style="max-width: 300px">
    <q-input filled v-model="date">
      <template v-slot:prepend>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="date" mask="YYYY-MM-DD HH:mm">
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
        </q-icon>
      </template>

      <template v-slot:append>
        <q-icon name="access_time" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-time v-model="date" mask="YYYY-MM-DD HH:mm" format24h>
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-time>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

这里有一些可以用在 QInput 的 mask 和 rules 中的工具。为了方便起见，您可以使用它们，也可以编写指定自定义需求的字符串。

例如： “date”, “time”, “fulltime”.

更多信息： QInput.

附加在按钮上

您可以使用默认插槽附加在按钮上：

<template>
  <div class="q-pa-md">
    <div class="q-mb-sm">
      <q-badge color="teal">
        Model: {{ time }}
      </q-badge>
    </div>

    <q-btn icon="access_time" round color="primary">
      <q-popup-proxy @before-show="updateProxy" cover transition-show="scale" transition-hide="scale">
        <q-time v-model="proxyTime">
          <div class="row items-center justify-end q-gutter-sm">
            <q-btn label="Cancel" color="primary" flat v-close-popup />
            <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
          </div>
        </q-time>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>
Model: 10:56

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QTime 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <q-time name="alarm" v-model="time" />

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card flat bordered class="q-mt-md bg-grey-2" v-if="submitResult.length > 0">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
10
:
15
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11
查看更多？
Form Components 表单组件
Range 范围选择器
Form Components 表单组件
Date Picker 日期选择器
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。