Ionic 日期时间

datetime 组件用于呈现一个选择器界面，使用户可以轻松选择日期和时间。选择器界面显示可滚动的列，这些列可用于选择年、月、日、小时、分钟和秒值。Ionic datetime 类似于原生 datetime 元素。但是，Ionic datetime 组件非常容易以首选格式显示日期和时间，并有助于管理 datetime 值。

示例

在这里，我们将看到一个<ion-datetime>组件的示例，没有任何值或属性。

输出

当您执行以上代码片段时，它将显示以下输出。

接下来，当您点击普通部分时，您将获得以下屏幕。此屏幕显示您当前的系统日期信息。一旦您点击完成按钮，它将被放置到普通部分中，如下所示的格式。

Ionic datetime 使用以下术语。

显示和选择器格式

datetime 组件在两个位置显示 datetime 值。第一个是在 <ion-datetime> 组件中，第二个是从页面底部呈现的选择器界面。

显示格式

此属性指定 datetime 的值应如何在 datetime 组件中打印给用户。<ion-datetime> 元素始终显示相对于用户时区的值。

选择器格式

此属性指定将在选择器格式中显示的列、列的顺序以及每个列中应使用的格式。如果您没有提供选择器格式，它将使用 displayFormat 的值。

示例

在此示例中，我们已在 <ion-datetime> 组件内添加了 displayFormat 和 pickerFormat 属性。此属性以特定格式显示 datetime。

输出

当您执行以上代码片段时，它将给出以下输出。

现在，点击特定格式部分，您将获得以下屏幕。在这里，您可以选择所需的年份。一旦您点击完成按钮，它将被放置到特定格式部分中。

Datetime 数据

在 JavaScript 和 HTML 中处理 datetime 值一直是一个挑战。但是，在 Ionic 中处理 datetime 允许开发人员轻松地在输入中格式化 datetime 值。它提供了简单的 datetime 选择器格式，以获得出色的用户体验。

最大和最小 datetimes

默认情况下，日期在任一方向上都是无限的，最大日期是当年结束，最小日期是 100 年前的当年开始。您可以使用 max 和 min 属性自定义最大和最小 datetime 值。例如，如果我们设置 min 属性为 2015，max 属性为 2020-12-31，则 datetime 组件将限制 2015 年初至 2020 年 12 月 31 日之间的选择。

示例

此示例说明了 disabled、min 和 max 属性与 <ion-datetime> 组件的用法。

输出

CustomPickerOptions

custom Picker Options 属性允许您创建一些自定义按钮。以下示例说明了自定义选择器选项如何与 <ion-datetime> 组件一起工作。

Home.page.html

Home.page.ts

在此页面中，我们通过使用自定义选择器选项创建了自定义按钮保存和日志。

输出

当您执行以上代码片段时，它将给出以下屏幕。

接下来，点击“自定义选择器”部分，它将给出以下屏幕。在这里，当您点击保存按钮时，数据将被保存，并且屏幕看起来像上面的图像。但是，当您点击日志按钮时，页面不会关闭，您将收到消息：点击了日志。不要关闭。

自定义区域设置

custom Locale 属性指定您的月份的自定义短名称。您可以查看以下示例以了解自定义区域设置如何与 <ion-datetime> 组件一起工作。

Home.page.html

Home.page.ts

输出

特定日期/月份/年份

<ion-datetime> 组件还允许您通过设置属性 monthValues、dayValues 和 yearValues 来选择特定日期、月份和年份。您可以查看以下示例以了解它如何与 <ion-datetime> 组件一起工作。

输出

在下面的输出中，您可以向上和向下滚动特定列以选择特定日期、月份和年份。