一、DateTime
DateTime组件是展示一个窗口让用户很方便的选择日期.使用ion-dateTime将会在页面底部显示一个滑动的选择日期窗口,这个选择器会展示出一个滑动的列来独立的选择年月日等等,这个组件很像原生的<input type="datetime-local">元素,但是,ionic的dateTime让你更简单的展示一个时间选择控件并管理这个值。
<ion-item> <ion-label>Date</ion-label> <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime> </ion-item>二、显示和选择格式
1、YYYY 4位数年份
2、YY
3、M
4、MM
5、MMM 月份英文缩写
6、MMMM 月份英文全称
7、D
8、DD
9、DDD
10、DDDD
11、a 小写的am、pm
12、A 大写的am、pm
13、m
14、mm 前面带0
15、s
16、ss
17、Z UTC时区偏移
三、显示格式
1、displayFormat输入属性是用来指定dateTime值应该用什么方式来显示。
<ion-item> <ion-label>Date</ion-label> <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime> </ion-item>
2、pickerFormat输入属性
该属性决定了显示的界面应该有几列,并且每列是什么格式。如果没有提供该属性,那么会根据displayFormat来决定。
3、时间数据
以前处理时间数据可能需要js和HTML输入,并且js的Date对象是出了名的难以解析,更糟糕的是不同浏览器的和js版本解析各个字符串不同,,每个地区尤其如此。
ionic使用ISO 8601 时间格式: YYYY-MM-DDTHH:mm Z,这个值是一个简单的string,并且当使用ISO的时间格式时,这将更加容易序列化和传入JSON对象中,在当你传入数据库时也会更加容易解析。
格式
Year YYYY
Year and Month YYYY-MM
Complete Date YYYY-MM-DD
Date and Time YYYY-MM-DDTHH: mm
注意:年份总是4位数字、毫秒总是3位数字、并且其他都是2位数字,所以比如一月份就会被加上0,即01,另外,小时是24小时制的。
displayFormat和pickerFormat的输出值——ngModel是十分重要的,这些格式仅仅用于显示值在选择页面中,但是datetime总是使用ISO 8601时间字符串。
4、时间的最大值和最小值
日期在不同方向上是无限的,所以对用户的选择至少应该有某种限制,在默认情况下,最大年份是今年,最小年份是100年之前。
为了自定义最小和最大年份,min和max属性可以用来提供更加自定义的数值,而不是默认值,并且同意遵循ISO 8601标准。
<ion-item> <ion-label>Date</ion-label> <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate"> </ion-datetime> </ion-item>5、月份名字和每周中每天的名字
因为不存在所有情况都符合的时间名称,所以我们提供了一个数组,如果应用程序需要使用一个默认以外的时间名字,那么可以在app层面设置,也可以在ion-datetime层面设置。
app层面
import { ionicBootstrap } from 'ionic-angular'; ionicBootstrap(MyApp, customProviders, { monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ], monthShortNames: ['jan', 'fev', 'mar', ... ], dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ], dayShortNames: ['dom', 'seg', 'ter', ... ], });
组件层面
<ion-item> <ion-label>Período</ion-label> <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="myDate" monthNames="janeiro, fevereiro, mar\u00e7o, ..." monthShortNames="jan, fev, mar, ..." dayNames="domingo, segunda-feira, ter\u00e7a-feira, ..." dayShortNames="dom, seg, ter, ..."></ion-datetime> </ion-item> 四、输入属性1、min 最小
2、max 最大
3、dispayFormat
4、pickerFormat
5、cancelText 默认值为Cancel
6、doneText 默认值为Done
7、yearValues/monthValues/dayValues/hourValues/minutesValues/monthNames/monthShortNames/dayNames/dayShortNames:数组,更改默认值
8、pickerOptions
9、mode
10、disabled
五、输出属性
1、ionChange
当选中的时间被改变时
2、ionCancel
当选中的时间被取消时