DateTime

一、DateTime

DateTime组件是展示一个窗口让用户很方便的选择日期.使用ion-dateTime将会在页面底部显示一个滑动的选择日期窗口,这个选择器会展示出一个滑动的列来独立的选择年月日等等,这个组件很像原生的元素,但是,ionic的dateTime让你更简单的展示一个时间选择控件并管理这个值。


  Date
  


二、显示和选择格式

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值应该用什么方式来显示。


  Date
  


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标准。


  Date
  
  


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', ... ],
});


组件层面


  Período
  


四、输入属性

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

当选中的时间被取消时





你可能感兴趣的:(Ionic2)