QDate

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

TIP

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

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

基础

Basic

TIP

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

Landscape

多选

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

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

Multiple days

范围选择

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

TIPS

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

WARNING

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

Single Range
Multiple ranges

自定义标题和副标题

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

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

Custom title and subtitle

功能性

当模型未填充时(例如,nullvoid 0/undefined),QDate仍必须显示一年中一个月的日历。 您可以为此使用default-year-month属性,否则将显示一年中的当前月份:

Default year month

可以更改默认视图。

Default view

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

First day of week

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

Today button
Disable and readonly

模型掩码

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

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

SSR的说明

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

波斯日历的说明

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

Simple mask

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

Mask with escaped characters

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

QDate and QTime on same model

TIP

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

自定义临时语言环境

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

Custom ad-hoc locale

着色

Coloring
Dark

突出事件

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

Events
Event color

限制选项

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

WARNING

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

Options

应用导航边界

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

Navigation boundaries

带附加按钮

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

With additional buttons

使用QSplitter和QTabPanels

With QSplitter and QTabPanels

更多信息: QSplitterQTabPanels

使用QInput

With QInput

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

QDate and QTime with QInput

QInput的maskrules属性有辅助器。为了方便起见,可以使用它们或写出指定您的自定义需求的字符串。

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

更多信息: QInput

波斯日历

TIP

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

WARNING

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

See example

本地表单提交

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

Native form

QDate API

Loading API...
Please wait...