QDate
表单组件
时间选择器
Quasar实用程序
日期实用程序
表单组件
字段 (包裹器)

QDate组件提供了一种输入日期的方法。 当前，它支持公历（默认）和波斯日历。

TIP

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

QDate API

QDate
: String
描述
用于指定控件的名称；如果处理直接提交到URL的表单，则非常有用
例子
car_id
: Boolean
描述
以横向模式显示组件
: Boolean
描述
在月视图中显示年选择器

用法

WARNING

请注意，模型的实际日期都是字符串格式的。

基础

Basic
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-date v-model="date" />

      <q-date
        v-model="date"
        minimal
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

TIP

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

Landscape
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      landscape
    />
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

多选

注意，下面的模型是一个数组，我们指定了“multiple”属性。

单击已选定的日期将取消选择它。

Multiple days
<template>
  <div class="q-pa-md">
    <div class="q-pb-sm">
      Model: {{ days }}
    </div>

    <q-date v-model="days" multiple />
  </div>
</template>
Model: [ "2019/02/01", "2019/02/10" ]
Feb 2019
2 days
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

范围选择

请注意，在下面的示例中，模型是一个对象（单选）或一个对象数组（多选）。

TIPS

*单击已选定的日期将取消选择它。 *用户当前的编辑范围也可以通过setEditingRange方法进行编程设置（检查API卡）。 *对于当前编辑范围，有两个有用的事件：range-start和range-end（检查API卡）。

WARNING

range属性只与options属性部分兼容：选定的范围可能还包括“不可选择”的天。

Single Range
<template>
  <div class="q-pa-md">
    <div class="q-pb-sm">
      Model: {{ model }}
    </div>

    <q-date v-model="model" range />
  </div>
</template>
Model: { "from": "2020/07/08", "to": "2020/07/17" }
Jul 2020
10 days
Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
Multiple ranges
<template>
  <div class="q-pa-md">
    <div class="q-pb-sm">
      Model: {{ days }}
    </div>

    <q-date v-model="days" range multiple />
  </div>
</template>
Model: [ { "from": "2020/07/01", "to": "2020/07/10" }, { "from": "2020/07/21", "to": "2020/07/25" } ]
Jul 2020
15 days
Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1

自定义标题和副标题

不处于“最小”模式时，QDate具有计算出的标题标题和副标题。 您可以覆盖它，如下面的示例所示。

单击标题时，QDate的视图将更改为日历，单击副标题时，该视图将切换为年份选择。

Custom title and subtitle
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-date
        v-model="date"
        title="John Doe"
        subtitle="Birthday"
      />
    </div>
  </div>
</template>
Birthday
John Doe
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

功能性

当模型未填充时（例如，null、void 0/undefined），QDate仍必须显示一年中一个月的日历。 您可以为此使用default-year-month属性，否则将显示一年中的当前月份：

Default year month
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      default-year-month="1964/08"
    />
  </div>
</template>
—
—
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
5

可以更改默认视图。

Default view
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      default-view="Years"
    />
  </div>
</template>
—
—

根据您设置的Quasar语言包应用一周的第一天，但也可以像下面的示例中那样强制执行。

First day of week
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      first-day-of-week="1"
    />
  </div>
</template>
2019
Fri, Feb 1
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
31
1
2
3

单击“Today”按钮将日期设置为当前用户日期。 需要标题，因此您不能将其与“最小”模式一起使用：

Today button
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      today-btn
    />
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
Disable and readonly
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-date
        v-model="date"
        disable
      />

      <q-date
        v-model="date"
        readonly
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

模型掩码

默认的模型掩码为YYYY/MM/DD，但是您也可以使用自定义掩码。

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

SSR的说明

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

波斯日历的说明

使用波斯日历时，QDate的掩码被强制为YYYY/MM/DD。

Simple mask
<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: YYYY-MM-DD
          </q-badge>
        </div>

        <q-date v-model="model1" mask="YYYY-MM-DD" />
      </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: MM-DD-YYYY
          </q-badge>
        </div>

        <q-date v-model="model2" mask="MM-DD-YYYY" />
      </div>
    </div>
  </div>
</template>
2019
Fri, Feb 15
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Thu, Mar 21
Sun
Mon
Tue
Wed
Thu
Fri
Sat
24
25
26
27
28
1
2
3
4
5
6

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

Mask with escaped characters
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <div>
        <div class="q-pb-sm">
          <q-badge color="teal">
            Model: {{ model1 }}
          </q-badge>
        </div>
        <div class="q-pb-sm">
          <q-badge color="purple" text-color="white">
            Mask: dddd, MMM D, YYYY
          </q-badge>
        </div>

        <q-date v-model="model1" mask="dddd, MMM D, YYYY" />
      </div>

      <div>
        <div class="q-pb-sm">
          <q-badge color="teal">
            Model: {{ model2 }}
          </q-badge>
        </div>
        <div class="q-pb-sm">
          <q-badge color="purple" text-color="white">
            Mask: [Month ( ]MMMM ) Do[, Year ( ]YYYY )
          </q-badge>
        </div>

        <q-date v-model="model2" mask="[Month ( ]MMMM ) Do[, Year ( ]YYYY )" />
      </div>
    </div>
  </div>
</template>
2019
Sun, Apr 28
Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
2019
Thu, Mar 14
Sun
Mon
Tue
Wed
Thu
Fri
Sat
24
25
26
27
28
1
2
3
4
5
6

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

QDate and QTime on same model
<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>
2019
Fri, Feb 22
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
9
:
02
AM
PM
12
1
2
3
4
5
6
7
8
9
10
11

TIP

如果要以编程方式设置QDate的值，只需重新分配传递的值即可。 但是，更新后的值必须是与掩码相同格式的字符串。 例如。 如果您的掩码为'dddd, MMM D, YYYY'，传递'2019/04/28'作为值将不起作用，作为替代你需要传递'Sunday, Apr 28, 2019'。

自定义临时语言环境

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

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

    <q-date v-model="model" :locale="myLocale" />
  </div>
</template>
2019
Vie, Mar 15
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
25
26
27
28

着色

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

      <q-date
        v-model="date"
        color="yellow"
        text-color="black"
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
Dark
<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <div class="q-gutter-md">
      <q-date
        v-model="date"
        dark
        bordered
      />

      <q-date
        v-model="date"
        color="orange"
        text-color="black"
        dark
        bordered
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

突出事件

第一个示例使用数组，第二个示例使用函数。

Events
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-date
        v-model="date"
        :events="events"
      />

      <q-date
        v-model="date"
        :events="eventsFn"
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
Event color
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-date
        v-model="date"
        :events="events"
        :event-color="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"
      />

      <q-date
        v-model="date"
        :events="eventsFn"
        :event-color="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2

限制选项

  • 您可以使用options属性将用户选择限制在特定时间。
  • 另外，为了更深入地限制选项，您还可以为options-fn属性提供一个函数（下面的第二个和第三个示例）。

WARNING

options属性与range属性仅部分兼容。范围可能包含“不可选择”的天数。

Options
<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-date
        v-model="date"
        :options="options"
      />

      <q-date
        v-model="date"
        :options="optionsFn"
      />

      <q-date
        v-model="date"
        :options="optionsFn2"
      />
    </div>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
2
3
4
7
8
10
11
12
13
14
15
16
17
18
19
20
21
22
24
25
26
27
28
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
3
5
7
9
11
13
15
17
19
21
23
25
27
1
2

应用导航边界

在下面的示例中，导航限制在2020/07和2020/09之间。

Navigation boundaries
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      navigation-min-year-month="2020/07"
      navigation-max-year-month="2020/09"
    />
  </div>
</template>
2020
Sat, Jul 4
Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1

带附加按钮

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

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

    <q-btn icon="event" round color="primary">
      <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
        <q-date v-model="proxyDate">
          <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-date>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>

使用QSplitter和QTabPanels

With QSplitter and QTabPanels
<template>
  <div>
    <q-splitter
      v-model="splitterModel"
      style="height: 450px"
    >

      <template v-slot:before>
        <div class="q-pa-md">
          <q-date
            v-model="date"
            :events="events"
            event-color="orange"
          />
        </div>
      </template>

      <template v-slot:after>
        <q-tab-panels
          v-model="date"
          animated
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="2019/02/01">
            <div class="text-h4 q-mb-md">2019/02/01</div>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
          </q-tab-panel>

          <q-tab-panel name="2019/02/05">
            <div class="text-h4 q-mb-md">2019/02/05</div>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
          </q-tab-panel>

          <q-tab-panel name="2019/02/06">
            <div class="text-h4 q-mb-md">2019/02/06</div>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
          </q-tab-panel>
        </q-tab-panels>
      </template>
    </q-splitter>
  </div>
</template>
2019
Fri, Feb 1
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
31
1
2
2019/02/01

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.

更多信息: QSplitter、QTabPanels。

使用QInput

With QInput
<template>
  <div class="q-pa-md" style="max-width: 300px">
    <q-input filled v-model="date" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
            <q-date v-model="date">
              <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>
    </q-input>
  </div>
</template>

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

QDate and QTime with QInput
<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 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 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。

波斯日历

TIP

您可以将其与Quasar[语言包]](/options/quasar-language-packs)结合使用，例如波斯语（Farsi，fa-ir），以翻译QDate字符串，从而获取完整的体验。

WARNING

使用波斯日历时，QDate的掩码被强制为YYYY/MM/DD。

See example

本地表单提交

当处理具有action和method的原生形式时（例如，使用Quasar和ASP.NET控制器），则需要在QDate上指定name属性，否则formData将不包含它（如果应该的话）：

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

      <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>
2020
Fri, Mar 20
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
阅读更多?
表单组件
时间选择器
Vue组件
图标
发现错误? 联系站长
MIT LICENSE | 隐私政策 | Quasar艺术作品