DateTime

    xiaoxiao2021-12-01  93

    一、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

    当选中的时间被取消时

    转载请注明原文地址: https://ju.6miu.com/read-679596.html

    最新回复(0)