Ionic日期时间

datetime组件用于呈现选择器界面, 使用户可以轻松选择日期和时间。选择器界面显示可滚动的列, 可用于选择年, 月, 日, 小时, 分钟和秒值。 Ionic日期时间类似于本地日期时间元素。但是, Ionic datetime组件非常易于以首选格式显示日期和时间, 并有助于管理datetime值。

例

在这里, 我们将看到一个没有任何值或属性的<ion-datetime>组件示例。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Plain</ion-label>
      <ion-datetime></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

输出：

当你执行上述代码片段时, 它将显示以下输出。

接下来, 当你在普通部分中点击时, 将显示以下屏幕。该屏幕显示你当前的系统日期信息。一旦你点击“完成”按钮, 它将像下面的格式一样放置在普通部分中。

Plain    Sep 29, 2019

Ionic日期时间使用以下术语。

显示和选择器格式

datetime组件在两个位置显示datetime值。第一个在<ion-datetime>组件中, 第二个是选择器界面, 从页面底部显示。

显示格式

此属性指定应如何在datetime组件内将datetime的值打印给用户。 <ion-datetime>元素始终显示相对于用户时区的值。

选择器格式

此属性指定将以选择器格式显示哪一列, 该列的顺序以及在每一列内应使用哪种格式。如果未提供选择器格式, 则将使用displayFormat的值。

例

在此示例中, 我们在<ion-datetime>组件内添加了displayFormat和pickerFormat属性。此属性以特定格式显示日期时间。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Specific Format</ion-label>
      <ion-datetime displayFormat="YYYY" placeholder="Select Year"></ion-datetime>
    </ion-item>    
    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>Ends</ion-label>
      <ion-datetime value="1990-02-20" placeholder="Select Date"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

输出：

当你执行上述代码片段时, 它将给出以下输出。

现在, 点击“特定格式”部分, 你将获得以下屏幕。在这里, 你可以选择所需的年份。单击“完成”按钮后, 它将立即放入“特定格式”部分。

日期时间数据

在JavaScript和HTML中处理日期时间值一直是一个挑战。但是, 在Ionic中处理datetime可使开发人员轻松在输入中设置datetime值的格式。它提供了简单的日期时间选择器格式, 以提供出色的用户体验。

最大和最小日期时间

日期在任一方向上都是无限的, 默认情况下, 最大日期是当前年份的结束, 最小日期是100年前的年初。你可以使用max和min属性来自定义最大和最小日期时间值。例如, 如果我们将min属性设置为2015, max属性设置为2020-12-31, 则datetime组件将限制在2015年初至2020年12月31日之间进行选择。

例

本示例说明了<ion-datetime>组件对Disabled, min和max属性的使用。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Disable</ion-label>
      <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="2010-01-26"></ion-datetime>
    </ion-item> 
    <ion-item>
      <ion-label>Max and Min</ion-label>
      <ion-datetime min="1990" max="2020" placeholder="Select Year"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

输出：

CustomPickerOptions

自定义Picker Options属性允许你创建一些自定义按钮。以下示例说明自定义选择器选项如何与<ion-datetime>组件一起使用。

Home.page.html

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list> 
    <ion-item>
      <ion-label>CustomPicker</ion-label>
      <ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

Home.page.ts

在此页面中, 我们通过使用自定义选择器选项创建了自定义按钮“保存”和“记录”。

import { Component } from '@angular/core';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  customPickerOptions: any;
  constructor() {
    this.customPickerOptions = {
      buttons: [{
        text: 'Save', handler: () => console.log ('Clicked Save')
    }, {
      text: 'Log', handler: () => {
        console.log ('Clicked Log. Do not Dismiss.');
        return false;
      }
    }]
  };
}
}

输出：

当你执行以上代码片段时, 将显示以下屏幕。

接下来, 单击“自定义选择器”部分, 将显示以下屏幕。在这里, 当你单击“保存”按钮时, 将保存数据, 并且屏幕看起来如上图所示。而当你单击“日志”按钮时, 该页面不会关闭, 你将收到以下消息：单击日志。不要解雇。

自定义语言环境

定制的Locale属性会为你的月份定制定制的短名称。你可以查看以下示例, 以了解自定义语言环境如何与<ion-datetime>组件一起使用。

Home.page.html

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list> 
    <ion-item>
      <ion-label>Custom Locale</ion-label>
      <ion-datetime value="1995-04-15" min="1990-02" max="2000"
      [dayShortNames]="customDayShortNames" displayFormat="DDD. MMM DD, YY"
      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

Home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  customDayShortNames = [ 's\u00f8n', 'man', 'tir', 'ons', 'tos', 'fre', 'l\u00f84'];
}

输出：

特定的天/月/年

<ion-datetime>组件还允许你通过设置属性monthValues, dayValues和yearValues来选择特定的日期, 月份和年份。你可以查看以下示例, 以了解它如何与<ion-datetime>组件一起使用。

<ion-header>
  <ion-toolbar color="light">
    <ion-title>DateTime</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list> 
    <ion-item>
      <ion-label>Specific day/month/year</ion-label>
      <ion-datetime monthValues= "6, 7, 8" yearValues="2017, 2018"
      dayValues= "01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15" 
      displayFormat= "DD/MM/YYYY" > </ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

输出：

在下面的输出中, 你可以上下滚动特定的列以选择特定的日期, 月份和年份。