QDate 组件提供了输入日期的方法。目前支持公历(默认)和波斯历。
¥The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars.
用法(Usage)
¥Usage
警告
请注意,模型的实际日期均为字符串格式。
¥Notice that the actual date(s) of the model are all in String format.
基本(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.
多项选择(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.
范围选择(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-start
和range-end
(请查看 API 卡片)。¥There are two useful events in regards to the current editing range:
range-start
andrange-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.
自定义标题和副标题(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.
功能(Functionality)
¥Functionality
当模型未填充时(例如 null
、void 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:
默认视图可以更改。
¥The default view can be changed.
一周的第一天将根据你设置的 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.
点击 “今天” 按钮将日期设置为当前用户日期。需要标头,因此不能与 “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:
模型掩码(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) 的说明
在掩码中使用 x
或 X
(时间戳)可能会导致客户端出现 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
.
如果你想在掩码中插入字符串(包括 [
和 ]
字符),请确保使用 [
和 ]
将它们括起来进行转义,否则这些字符可能会被解释为格式标记。
¥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.
使用掩码将 QDate 和 QTime 连接到同一个模型:
¥Using the mask to connect a QDate and QTime to the 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:
着色(Coloring)
¥Coloring
高亮事件(Highlighting events)
¥Highlighting events
第一个例子使用数组,第二个例子使用函数。
¥The first example is using an array and the second example is using a function.
限制选项(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.
应用导航边界(Applying navigation boundaries)
¥Applying navigation boundaries
在下面的例子中,导航在 2020 年 7 月到 2020 年 9 月之间受到限制。
¥In the example below the navigation is restricted between 2020/07 and 2020/09.
使用附加按钮(With additional buttons)
¥With additional buttons
你可以使用默认插槽添加按钮:
¥You can use the default slot for adding buttons:
使用 QSplitter 和 QTabPanels(With QSplitter and QTabPanels)
¥With QSplitter and QTabPanels
更多信息:QSplitter, QTabPanels.
¥More info: QSplitter, QTabPanels.
使用 QInput(With QInput)
¥With QInput
在 QInput 上连接具有相同模型的 QDate 和 QTime:
¥Connecting a QDate and QTime with same model on a QInput:
以下是 QInput mask
和 rules
属性的辅助函数。你可以使用它们来方便使用,也可以编写指定 自定义需求 的字符串。
¥The following are helpers for QInput mask
and rules
props. You can use these for convenience or write the string specifying your custom needs.
属性
mask
辅助函数:完整列表。¥Property
mask
helpers: full list.属性
rules
辅助函数:完整列表。¥Property
rules
helpers: full list.
示例:“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
.
原生表单提交(Native form submit)
¥Native form submit
处理具有 action
和 method
的原生表单时(例如,将 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):