API 浏览器
QDate

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

¥The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars.

提示

对于日期和/或时间处理,另请参阅 Quasar 日期工具

¥For handling date and/or time, also check out Quasar Date Utils.

Loading QDate API...

用法(Usage)

¥Usage

警告

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

¥Notice that the actual date(s) of the model are all in String format.

基本(Basic)

¥Basic

Basic



提示

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

¥For landscape mode, you can use it along with $q.screen to make QDate responsive. Example: :landscape="$q.screen.gt.xs". More info: Quasar Screen Plugin.

Landscape



多项选择(Multiple selection)

¥Multiple selection

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

¥Notice below that the model is an Array and we specify the “multiple” prop.

点击已选择的日期将取消选择。

¥Clicking on an already selected day will deselect it.

Multiple days



范围选择(Range selection)

¥Range selection

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

¥Notice in the examples below that the model is an Object (single selection) or an Array of Objects (multiple selection).

TIPS

  • 点击已选择的日期将取消选择。

    ¥Clicking on an already selected day will deselect it.

  • 用户当前的编辑范围也可以通过 setEditingRange 方法以编程方式设置(请查看 API 卡片)。

    ¥The user’s current editing range can also be set programmatic through the setEditingRange method (check the API card).

  • 关于当前编辑范围,有两个有用的事件:range-startrange-end(请查看 API 卡片)。

    ¥There are two useful events in regards to the current editing range: range-start and range-end (check the API card).

警告

range 属性仅与 options 属性部分兼容:选定的范围可能还包含 “unselectable” 天。

¥The range property is only partially compatible with the options prop: selected ranges might also include “unselectable” days.

Single Range



Multiple ranges



自定义标题和副标题(Custom title and subtitle)

¥Custom title and subtitle

当不处于 ‘minimal’ 模式时,QDate 会拥有计算得出的标题和副标题。你可以覆盖它,如下例所示。

¥When not in ‘minimal’ mode, QDate has a computed header title and subtitle. You can override it, like in the example below.

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

¥When clicking on title then the QDate’s view is changed to the calendar and when clicking on subtitle, the view will switch to year picking.

Custom title and subtitle



功能(Functionality)

¥Functionality

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

¥When model is unfilled (like null, void 0 / undefined) QDate still has to show the calendar for a month of a year. You can use default-year-month prop for this, otherwise the current month of the year will be shown:

Default year month



默认视图可以更改。

¥The default view can be changed.

Default view



一周的第一天将根据你设置的 Quasar 语言包 来应用,但你也可以强制执行,如下例所示。

¥The first day of the week is applied depending on the Quasar Language Pack that you’ve set, but you can also force it, like in the example below.

First day of week



点击 “今天” 按钮将日期设置为当前用户日期。需要标头,因此不能与 “minimal” 模式一起使用:

¥Clicking on the “Today” button sets date to current user date. Requires the header, so you can’t use it along with “minimal” mode:

Today button



Disable and readonly



模型掩码(Model mask)

¥Model mask

默认模型蒙版为 YYYY/MM/DD,但你也可以使用自定义蒙版。

¥The default model mask is YYYY/MM/DD, however you can use custom ones too.

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

¥The mask prop tokens can be found at Quasar Utils > Date utils.

关于服务器渲染 (SSR) 的说明

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

¥Using x or X (timestamps) in the mask may cause hydration errors on the client, because decoding the model String must be done with new Date() which takes into account the local timezone. As a result, if the server is in a different timezone than the client, then the rendered output of the server will differ than the one on the client so hydration will fail.

关于波斯历法的说明

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

¥When using the persian calendar, the mask for QDate is forced to YYYY/MM/DD.

Simple mask



如果你想在掩码中插入字符串(包括 [] 字符),请确保使用 [] 将它们括起来进行转义,否则这些字符可能会被解释为格式标记。

¥If you want to insert strings (including [ and ] characters) into your mask, make sure you escape them by surrounding them with [ and ], otherwise the characters might be interpreted as format tokens.

Mask with escaped characters



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

¥Using the mask to connect a QDate and QTime to the same model:

QDate and QTime on same model



提示

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

¥If you want to programmatically set the value of QDate, you can do so by just re-assigning the value that you pass. However, the updated value needs to be a string in the same format as your mask. Eg. in the case your mask is 'dddd, MMM D, YYYY', passing '2019/04/28' as value won’t work, you would need to pass 'Sunday, Apr 28, 2019' instead.

自定义临时语言环境(Custom ad-hoc locale)

¥Custom ad-hoc locale

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

¥If, for some reason, you need to use a custom ad-hoc locale rather than the current Quasar Language Pack that has been set, you can use the locale prop:

Custom ad-hoc locale



着色(Coloring)

¥Coloring

Coloring



Force dark mode



高亮事件(Highlighting events)

¥Highlighting events

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

¥The first example is using an array and the second example is using a function.

Events



Event color



限制选项(Limiting options)

¥Limiting options

  • 你可以使用 options 属性限制用户在特定时间进行选择。

    ¥You can use the options prop to limit user selection to certain times.

  • 或者,为了更深入地限制选项,你还可以为 options-fn 属性提供一个函数(见下面的第二个和第三个示例)。

    ¥Alternatively, for a more in-depth way of limiting options, you can also supply a function (second and third example below) to options-fn prop.

警告

options 属性仅与 range 属性部分兼容。范围可能包含 “unselectable” 天。

¥The options property is only partially compatible with the range prop. Ranges might contain “unselectable” days.

Options



应用导航边界(Applying navigation boundaries)

¥Applying navigation boundaries

在下面的例子中,导航在 2020 年 7 月到 2020 年 9 月之间受到限制。

¥In the example below the navigation is restricted between 2020/07 and 2020/09.

Navigation boundaries



使用附加按钮(With additional buttons)

¥With additional buttons

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

¥You can use the default slot for adding buttons:

With additional buttons



使用 QSplitter 和 QTabPanels(With QSplitter and QTabPanels)

¥With QSplitter and QTabPanels

With QSplitter and QTabPanels



更多信息:QSplitter, QTabPanels.

¥More info: QSplitter, QTabPanels.

使用 QInput(With QInput)

¥With QInput

With QInput



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

¥Connecting a QDate and QTime with same model on a QInput:

QDate and QTime with QInput



以下是 QInput maskrules 属性的辅助函数。你可以使用它们来方便使用,也可以编写指定 自定义需求 的字符串。

¥The following are helpers for QInput mask and rules props. You can use these for convenience or write the string specifying your custom needs.

示例:“date”, “time”, “fulltime”.

¥Examples: “date”, “time”, “fulltime”.

更多信息:QInput

¥More info: QInput.

波斯日历(Persian calendar)

¥Persian calendar

你需要将 calendar 设置为 persian 才能使用此功能。

¥You have to set calendar to persian to use this feature .

提示

你可以将其与 Quasar 语言包(例如波斯语(Farsi,fa-IR))结合使用,以便将 QDate 字符串也翻译过来,从而获得完整的体验。

¥You can couple this with a Quasar language pack such as Persian (Farsi, fa-IR) to have the QDate strings translated too, for the full experience.

警告

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

¥When using the persian calendar, the mask for QDate is forced to YYYY/MM/DD.

See example

原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 Quasar 与 ASP.NET 控制器结合使用时),你需要在 QDate,否则 formData 将不会包含它(如果应该包含的话):

¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QDate, otherwise formData will not contain it (if it should):

Native form