DataTime

ion-datetime

DateTime组件用于显示一个界面，方便用户选择日期和时间。 点击<ion-datetime>将显示从页面底部向上滑动的选择器界面。 选择器然后显示可滚动列，可用于单独选择年，月，日，小时和分钟值。 DateTime组件类似于native <input type =“datetime-local”>元素，但是，Ionic的DateTime组件可以轻松地以优选格式显示日期和时间，并管理datetime值。

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

Display 和 Picker Formats

DateTime组件在两个位置显示值：在<ion-datetime>组件中，以及从屏幕底部显示的界面。 下表列出了可以使用的所有格式。

重要提示：请参阅下面的月份名称和星期名称部分，了解如何使用不同的月份和日期。

Display Format

display Format input 属性指定在ion-datetime组件中如何打印datetime的值作为格式化文本。

在下面的示例中，<ion-datetime>中的显示将使用月份的短名称，数字日，前导零，逗号和四位数年份。 除了日期，它将以24小时格式和分钟显示时间。 任何字符都可以用作分隔符。 使用此格式的示例显示为：2005年6月17日11:06。

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

Picker Format

picker Format 输入属性确定在界面中应显示哪些列，列的顺序以及每列中使用的格式。 如果没有提供pickerFormat输入，那么它将默认为displayFormat。

在以下示例中，<ion-datetime>中的显示将使用MM / YYYY格式，例如06/2020。 但是，选择器界面将显示两个月份的长名称和四位数年份。

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

Datetime Data

从历史上看，JavaScript内部甚至HTML输入中处理datetime值一直是一个挑战。 具体来说，JavaScript的Date对象是非常难以正确解析datetime字符串或格式化datetime值。 更糟糕的是，不同的浏览器和JavaScript版本会不同地分析各种日期时间字符串，特别是每个语言环境。

但不用担心，一切都不会迷失！ Ionic的datetime输入设计使开发人员可以避免常见的陷阱，允许开发人员轻松地在输入内格式化日期时间值，并为用户提供一个简单的日期时间选择器，实现极好的用户体验。

ISO 8601日期时间格式：YYYY-MM-DDTHH：mmZ

Ionic使用ISO 8601 datetime格式作为其值。 该值只是一个字符串，而不是使用JavaScript的Date对象。 另外，当使用ISO日期时间格式时，可以更容易地在JSON对象中进行序列化和传递，并将数据库发送到标准化格式，如果需要，可以轻松解析。

请注意，年份始终为四位数，毫秒（如果添加）始终为三位数，所有其他数字始终为两位数。 所以代表1月份的数字总是有零的，如01.另外，小时总是以24小时格式，所以00是12点钟，12点钟，13表示下午1点，23表示晚上11点。

同样重要的是要注意，displayFormat或pickerFormat都不能设置datetime值的输出，它是由组件的ngModel设置的值。 格式仅用于将值显示为文本和选择器的界面，但datetime的值始终保持为有效的ISO 8601 datetime字符串。

Min 和 Max Datetimes

日期在任一方向是无限的，因此对于用户的选择，至少应该限制某些可以选择的日期的形式。 默认情况下，最大日期为当前年底，最小日期为100年前的年初。

要定制最小和最大日期时间值，可以提供最小和最大成分输入，这可能对应用程序的用例更有意义，而不是过去100年的默认值。 按照上表中列出的相同的IS0 8601格式，每个组件可以限制用户可以选择哪些日期。 以下是限制2016年初至2020年10月31日期间的日期选择的示例：

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
  </ion-datetime>
</ion-item>

Month Names 和 Day of the Week Names

目前，根据语言或语言环境，自动选择月份名称或星期几名称的正确语言/拼写没有一个大小合适的标准。 好消息是，大多数浏览器都采用了Intl.DateTimeFormat标准。 然而，目前这个标准并没有被所有流行的浏览器完全实现，所以Ionic不可能利用它。 此外，Angular还提供国际化服务，但仍处于沉重的发展阶段，所以Ionic目前不依赖于它。

所有考虑的事情，最简单的解决方案是提供一系列的名称，如果应用程序需要使用除默认英文版本的月份和日期名称之外的名称。 月份名称和日期名称可以在应用程序级别或单独的离子日期时间级别进行配置。

App Config Level

//app.module.ts
@NgModule({
...,
imports: [
  IonicModule.forRoot(MyApp, {
  monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
  monthShortNames: ['jan', 'fev', 'mar', ... ],
  dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
  dayShortNames: ['dom', 'seg', 'ter', ... ],
})
],
...
})

Component Input Level

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

Advanced Datetime Validation 和 Manipulation

datetime选择器提供了选择精确格式的简单性，并使用标准化的ISO 8601日期时间格式将datetime值作为字符串保留。 但是，请注意，在验证和操作datetime值时，ion-datetime不会尝试解决所有的配置。 如果datetime值需要从某种格式解析，或者被操作（比如添加5天到一个日期，减去30分钟等等），甚至将数据格式化到特定的区域，那么我们强烈建议您使用moment.js “在JavaScript中解析，验证，操作和显示日期”。 Moment.js在JavaScript中处理数据时间时，迅速成为我们的goto标准，但是由于大多数应用程序不需要它，因此Ionic不会预先包装此依赖关系，而且其区域设置应由最终开发者决定。

使用

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate">
  </ion-datetime>
</ion-item>

效果：

实例成员

validate()

输入属性

输出事件

Sass Variables

• iOS

• Material Design

• Windows Platform