QDate

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

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

TIP

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

QDate API

QDate API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单，则非常有用
landscape
: Boolean
说明
以横向模式显示组件
years-in-month-view
: Boolean
说明
在月份视图中显示年份选择器

用法

WARNING

请注意,实际的日期 model 全都是一个字符串。

基础

<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

TIP

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

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      landscape
    />
  </div>
</template>
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

多选

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

点击一个已经选择的日期将会取消选择它。

<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" ]
二月 2019
2 天
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

范围选择

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

TIPS

  • 点击一个已经选择的日期将会取消选择它。
  • 还可以通过 setEditingRange 方法编程设置用户当前的编辑范围（见 API 部分）。
  • 对于当前的编辑范围，有两个有用的事件: range-start 和 range-end（见 API 部分）。

WARNING

range 属性仅与 options 属性部分兼容：选定的范围可能还包括 “unselectable” （不可选择）的日期。

<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" }
七月 2020
10 天
周日
周一
周二
周三
周四
周五
周六
28
29
30
1
<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" } ]
七月 2020
15 天
周日
周一
周二
周三
周四
周五
周六
28
29
30
1

自定义标题和副标题

当不处于 ‘minimal’ 模式时，QDate 有一个标题和副标题。您可以覆盖它，如下面的示例所示。

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

<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
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

功能

当 model 模型数据为空时（如 null, void 0/undefined）时，QDate 仍然必须显示一年中某个月份的日历。您可以使用 default-year-month 属性来设置默认年月，否则当前的月份将显示:

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      default-year-month="1964/08"
    />
  </div>
</template>
—
—
周日
周一
周二
周三
周四
周五
周六
26
27
28
29
30
31
1
2
3
4
5

默认视图可以改变。

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

每周第一天的设置取决于您设置的 Quasar 语言包，但您也可以强制指定它，如下面的示例所示。

<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      first-day-of-week="1"
    />
  </div>
</template>
2019
2月1日周五
周一
周二
周三
周四
周五
周六
周日
28
29
30
31
1
2
3
、 单击 "Today" 按钮将日期设置为当前用户日期。需要标头，因此不能将其与 "minimal" 模式一起使用： 
<template>
  <div class="q-pa-md">
    <q-date
      v-model="date"
      today-btn
    />
  </div>
</template>
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

Model 掩码

默认的 model 数据掩码是 YYYY/MM/DD，然而您也可以使用自定义掩码。

mask 可以在 Quasar Utils > Date utils 页面中找到。

SSR 的注意事项

在掩码中使用 x 或 X（时间戳）可能会在客户端上造成水合错误，因为解码 model 字符串必须使用考虑到本地时区的 new Date() 完成。因此，如果服务器与客户端处于不同的时区，则服务器的渲染输出将与客户端的不同，因此水合将失败。

波斯日历的注意事项

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

<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>
Model: 2019-02-15
Mask: YYYY-MM-DD
2019
2月15日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
Model: 03-21-2019
Mask: MM-DD-YYYY
2019
3月21日周四
周日
周一
周二
周三
周四
周五
周六
24
25
26
27
28
1
2
3
4
5
6

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

<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>
Model: Sunday, Apr 28, 2019
Mask: dddd, MMM D, YYYY
—
—
周日
周一
周二
周三
周四
周五
周六
23
24
25
26
27
28
1
2
3
4
5
Model: Month ( March ) 14th, Year ( 2019 )
Mask: [Month ( ]MMMM ) Do[, Year ( ]YYYY )
—
—
周日
周一
周二
周三
周四
周五
周六
23
24
25
26
27
28
1
2
3
4
5

使用掩码将 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

TIP

如果希望以编程方式设置 QDate 的值，只需重新分配传递的值即可。但是，更新的值需要是一个与您的掩码格式相同的字符串。如，如果您的掩码为 'dddd, MMM D, YYYY'，那么设置值为 '2019/04/28' 不会生效，需要使用 'Sunday, Apr 28, 2019' 代替。

自定义特殊语言环境

如果出于某种原因，您需要使用自定义的特殊语言环境，而不是已设置的当前 Quasar 语言包，您可以使用 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>
Model: 2019/03/15
2019
3月15日周五
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
25
26
27
28

着色

<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

高亮突出某些日期事件

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

<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2

限制选项

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

WARNING

options 属性仅与 range 属性部分兼容：选定的范围可能还包括 “unselectable” （不可选择）的日期。

<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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
27
28
29
30
31
1
2
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
2019
2月1日周五
周日
周一
周二
周三
周四
周五
周六
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 之间。

<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
7月4日周六
周日
周一
周二
周三
周四
周五
周六
28
29
30
1

附加在按钮上

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

<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" cover 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>
Model: 2019/03/01

搭配 QSplitter 和 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
2月1日周五
周日
周一
周二
周三
周四
周五
周六
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

<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" cover 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:

<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.

波斯日历

TIP

您可以将其与诸如波斯语（波斯语，fair）之类的Quasar 语言包相结合，以便将 QDate 的字符串翻译，提供完整的体验。

WARNING

当使用波斯日历时，掩码会被强制设置为：YYYY/MM/DD。

查看示例

原生表单提交

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

<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
3月20日周五
周日
周一
周二
周三
周四
周五
周六
1
2
3
4
查看更多？
Form Components 表单组件
Time Picker 时间选择器
Vue 组件
Icon 图标
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。