Skip to page content

日期选择器

QDate 组件提供了一个用户友好的日期选择界面。目前支持公历(默认)和波斯历。

TIP

对于处理日期和/或时间,也可以查看 Quasar 日期工具。

WARNING

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

基础示例

TIP

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

多日选择

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

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

范围选择

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

提示
  • 点击已选择的日期将取消选择。
  • 用户当前的编辑范围也可以通过 setEditingRange 方法以编程方式设置(查看 API 卡片)。
  • 关于当前编辑范围有两个有用的事件:range-start 和 range-end(查看 API 卡片)。
WARNING

range 属性与 options 属性仅部分兼容:选定的范围可能包含"不可选择"的日期。

自定义标题和副标题

当不在"minimal"模式时,QDate 有一个计算出的标题和副标题。您可以覆盖它,如下例所示。

点击标题时,QDate 的视图会切换到日历视图,点击副标题时,视图会切换到年份选择。

功能特性

当模型未填充时(如 null、void 0 / undefined),QDate 仍需要显示某年某月的日历。您可以使用 default-year-month 属性来设置,否则将显示当前年月:

在 SSR 或 SSG 模式下对未填充的 QDate 进行服务端渲染时,请显式设置 default-year-month。否则,处于不同时区的服务器和浏览器可能会在水合期间选择不同的初始月份。

可以更改默认视图。

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

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

模型掩码

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

mask 属性的令牌可以在 Quasar 工具 > 日期工具 中找到。

SSR/SSG 注意事项

在掩码中使用 x 或 X(时间戳)可能会导致客户端出现水合错误,因为解码模型字符串必须使用 new Date(),这会考虑本地时区。因此,如果服务器和客户端处于不同的时区,则服务器的渲染输出将与客户端不同,从而导致水合失败。

波斯历注意事项

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

如果您想在掩码中插入字符串(包括 [ 和 ] 字符),请确保通过用 [ 和 ] 包围它们来转义它们,否则这些字符可能会被解释为格式令牌。

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

TIP

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

自定义临时区域设置

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

颜色定制

事件标记

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

限制选项

  • 您可以使用 options 属性来限制用户只能选择特定时间。
  • 或者,对于更深入的选项限制方式,您也可以向同一个 options 属性提供一个函数(下面的第二个和第三个示例)。
WARNING

options 属性与 range 属性仅部分兼容。范围可能包含"不可选择"的日期。

应用导航边界

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

附加按钮

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

与 QSplitter 和 QTabPanels 一起使用

更多信息:QSplitter、QTabPanels。

与 QInput 一起使用

将 QDate 和 QTime 与 QInput 上的相同模型连接:

以下是 QInput 的 mask 和 rules 属性的辅助工具。您可以使用这些工具来方便使用,或编写指定自定义需求的字符串。

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

更多信息:QInput。

波斯历

您必须将 calendar 设置为 persian 才能使用此功能。

TIP

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

WARNING

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

本地化数字
v2.31+

QDate 显示的日、年数字(日历格子、导航、头部、年份视图)会遵循当前语言包的 formatNumber 函数,或(当定义了 locale 属性时)该属性中的对应函数。fa 和 fa-IR 语言包将其定义为渲染波斯数字,如上例所示。model 数据始终保持 ASCII 数字(1397/08/12)。

任何语言包(根级 formatNumber 键)或临时 locale 都可以选择启用它。该函数接收即将显示的 ASCII 数字字符串(在 QTime 需要补零处已补零),并返回其本地化渲染结果:

const myLocale = {
  // ...其他 locale 字段
  formatNumber: value => value.replace(/\d/g, digit => '০১২৩৪৫৬৭৮৯'[digit]) // 孟加拉数字
}

QTime 的头部和时钟表盘、QPagination 的页码都遵循同一个函数。

原生表单提交

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

浏览器会将 model 转换为字符串。当使用 multiple 或 range 模式时,如果服务器需要单独的日期或结构化的范围数据,请使用自己的隐藏 input 元素。