Ionic日期时间 _Ionic日期时间

datetime组件用于呈现选择器界面, 使用户可以轻松选择日期和时间。选择器界面显示可滚动的列, 可用于选择年, 月, 日, 小时, 分钟和秒值。 Ionic日期时间类似于本地日期时间元素。但是, Ionic datetime组件非常易于以首选格式显示日期和时间, 并有助于管理datetime值。
例
在这里, 我们将看到一个没有任何值或属性的< ion-datetime> 组件示例。

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> Plain< /ion-label> < ion-datetime> < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

输出：
当你执行上述代码片段时, 它将显示以下输出。

文章图片
接下来, 当你在普通部分中点击时, 将显示以下屏幕。该屏幕显示你当前的系统日期信息。一旦你点击“完成”按钮, 它将像下面的格式一样放置在普通部分中。

PlainSep 29, 2019

文章图片
Ionic日期时间使用以下术语。
显示和选择器格式
datetime组件在两个位置显示datetime值。第一个在< ion-datetime> 组件中, 第二个是选择器界面, 从页面底部显示。
显示格式
此属性指定应如何在datetime组件内将datetime的值打印给用户。 < ion-datetime> 元素始终显示相对于用户时区的值。
选择器格式
此属性指定将以选择器格式显示哪一列, 该列的顺序以及在每一列内应使用哪种格式。如果未提供选择器格式, 则将使用displayFormat的值。
例
在此示例中, 我们在< ion-datetime> 组件内添加了displayFormat和pickerFormat属性。此属性以特定格式显示日期时间。

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> Specific Format< /ion-label> < ion-datetime displayFormat="YYYY" placeholder="Select Year"> < /ion-datetime> < /ion-item> < ion-item> < ion-label> Start Time< /ion-label> < ion-datetime displayFormat="h:mm A" pickerFormat="h:mm A" value="http://www.srcmini.com/1990-02-19T07:43Z"> < /ion-datetime> < /ion-item> < ion-item> < ion-label> Ends< /ion-label> < ion-datetime value="http://www.srcmini.com/1990-02-20" placeholder="Select Date"> < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

输出：
当你执行上述代码片段时, 它将给出以下输出。

文章图片
现在, 点击“特定格式”部分, 你将获得以下屏幕。在这里, 你可以选择所需的年份。单击“完成”按钮后, 它将立即放入“特定格式”部分。

文章图片
日期时间数据
在JavaScript和HTML中处理日期时间值一直是一个挑战。但是, 在Ionic中处理datetime可使开发人员轻松在输入中设置datetime值的格式。它提供了简单的日期时间选择器格式, 以提供出色的用户体验。
最大和最小日期时间
日期在任一方向上都是无限的, 默认情况下, 最大日期是当前年份的结束, 最小日期是100年前的年初。你可以使用max和min属性来自定义最大和最小日期时间值。例如, 如果我们将min属性设置为2015, max属性设置为2020-12-31, 则datetime组件将限制在2015年初至2020年12月31日之间进行选择。
例
本示例说明了< ion-datetime> 组件对Disabled, min和max属性的使用。

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> Disable< /ion-label> < ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="http://www.srcmini.com/2010-01-26"> < /ion-datetime> < /ion-item> < ion-item> < ion-label> Max and Min< /ion-label> < ion-datetime min="1990" max="2020" placeholder="Select Year"> < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

输出：

文章图片
CustomPickerOptions
自定义Picker Options属性允许你创建一些自定义按钮。以下示例说明自定义选择器选项如何与< ion-datetime> 组件一起使用。
Home.page.html

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> CustomPicker< /ion-label> < ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY"> < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

Home.page.ts
在此页面中, 我们通过使用自定义选择器选项创建了自定义按钮“保存”和“记录”。

import { Component } from '@angular/core'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {customPickerOptions: any; constructor() {this.customPickerOptions = {buttons: [{text: 'Save', handler: () => console.log ('Clicked Save')}, {text: 'Log', handler: () => {console.log ('Clicked Log. Do not Dismiss.'); return false; }}]}; }}

输出：
当你执行以上代码片段时, 将显示以下屏幕。

文章图片
接下来, 单击“自定义选择器”部分, 将显示以下屏幕。在这里, 当你单击“保存”按钮时, 将保存数据, 并且屏幕看起来如上图所示。而当你单击“日志”按钮时, 该页面不会关闭, 你将收到以下消息：单击日志。不要解雇。

文章图片
自定义语言环境
定制的Locale属性会为你的月份定制定制的短名称。你可以查看以下示例, 以了解自定义语言环境如何与< ion-datetime> 组件一起使用。
Home.page.html

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> Custom Locale< /ion-label> < ion-datetime value="http://www.srcmini.com/1995-04-15" min="1990-02" max="2000"[dayShortNames]="customDayShortNames" displayFormat="DDD. MMM DD, YY"monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"> < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

Home.page.ts

import { Component } from '@angular/core'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {customDayShortNames = [ 's\u00f8n', 'man', 'tir', 'ons', 'tos', 'fre', 'l\u00f84']; }

输出：

文章图片

文章图片
特定的天/月/年
< ion-datetime> 组件还允许你通过设置属性monthValues, dayValues和yearValues来选择特定的日期, 月份和年份。你可以查看以下示例, 以了解它如何与< ion-datetime> 组件一起使用。

< ion-header> < ion-toolbar color="light"> < ion-title> DateTime< /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-label> Specific day/month/year< /ion-label> < ion-datetime monthValues= "6, 7, 8" yearValues="2017, 2018"dayValues= "01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15" displayFormat= "DD/MM/YYYY" > < /ion-datetime> < /ion-item> < /ion-list> < /ion-content>

【Ionic日期时间】输出：
在下面的输出中, 你可以上下滚动特定的列以选择特定的日期, 月份和年份。