DateTime

最新推荐文章于 2025-07-13 11:50:14 发布

qq_30970807

最新推荐文章于 2025-07-13 11:50:14 发布

阅读量2.7k

点赞数

分类专栏： Ionic2

Ionic2 专栏收录该内容

19 篇文章

订阅专栏

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

五、输出属性