ion-datetime

Contents

Datetimeコンポーネントはページの下部にPickerインターフェースを表示し、 ユーザーが日付と時刻を簡単に選択できるようにします。 ピッカーには、年、月、日、時間、分の値を個別に選択するために使用できるスクロール可能な列が表示されます。 日時は datetime-local 型のネイティブの Input 要素に似ていますが、IonicのDatetimeコンポーネントを使用すると、 希望する形式で日付と時刻を表示したり、 日時の値を管理したりすることが容易になります。

Display and Picker Formats

datetimeコンポーネントでは、<ion-datetime> コンポーネントと、 画面の下部に表示されるピッカー・インターフェースの2つの場所に値が表示されます。 次の表に、使用できるすべての形式を示します。

Format Description Example
YYYY Year, 4 digits 2018
YY Year, 2 digits 18
M Month 1 ... 12
MM Month, leading zero 01 ... 12
MMM Month, short name Jan
MMMM Month, full name January
D Day 1 ... 31
DD Day, leading zero 01 ... 31
DDD Day, short name Fri
DDDD Day, full name Friday
H Hour, 24-hour 0 ... 23
HH Hour, 24-hour, leading zero 00 ... 23
h Hour, 12-hour 1 ... 12
hh Hour, 12-hour, leading zero 01 ... 12
a 12-hour time period, lowercase am pm
A 12-hour time period, uppercase AM PM
m Minute 1 ... 59
mm Minute, leading zero 01 ... 59
s Second 1 ... 59
ss Second, leading zero 01 ... 59
Z UTC Timezone Offset Z or +HH:mm or -HH:mm

Important: 月と日に異なる名前を使用する方法については、後述の Month Names and Day of the Week Names をご覧ください。

Display Format

displayFormat の入力プロパティーは、datetimeコンポーネント内で datetimeの値を書式付きテキストとして出力する方法を指定します。

以下の表にいくつかの例を示します。記載されているフォーマット 上記は、任意の組み合わせで表示フォーマットに渡すことができます。

Display Format Example
M-YYYY 6-2005
MM/YY 06/05
MMM YYYY Jun 2005
YYYY, MMMM 2005, June
MMM DD, YYYY HH:mm Jun 17, 2005 11:06

Important: ion-datetime は常にユーザーのタイムゾーンに相対的な値を表示します。 値 09:00:00+01:00 が指定された場合、日時コンポーネントでは、 ユーザーのタイムゾーン・オフセットが -04:00 であった場合 04:00:00-04:00 と表示されます。

Picker Format

pickerFormat プロパティは、Pickerインタフェースに表示する列、 列の順序、および各列内で使用する形式を決定します。 pickerFormat が指定されていない場合は、 displayFormat の値が使用されます。 フォーマットの例については、 Display Format セクションの図を参照してください。

Datetime Data

これまで、JavaScript内、あるいはHTMLのInputでの日時値の処理は、常に課題でした。 特に、JavaScriptの Date オブジェクトは、datetimeの文字列を正しく解析したり、 datetimeの値をフォーマットしたりすることが非常に困難であることで有名です。 さらに悪いことに、ブラウザとJavaScriptのバージョンが異なると、 さまざまな日時ストリングの構文解析方法が異なり、特にロケールごとに異なります。

幸いなことに、Ionicの datetime は、開発者がよくはまる落とし穴を避けることができるように設計されているため、 開発者は Input の中で日時の値を簡単にフォーマットすることができ、 ユーザーには素晴らしいUser Experienceのための シンプルな日時ピッカーを提供することができます。

ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ

Ionic では、ISO 8601 datetime format を使用されます。 値は、JavaScriptの Date オブジェクトを使用するのではなく、単なる文字列です。 さらに、ISO datetime formatを使用すると、JSONオブジェクト内でシリアライズして渡すことが容易になり、 データベースに標準フォーマットを送信して 必要に応じて簡単に解析できるようになります。

ISO formatは、単純に年だけを利用することも、時間と分だけを使用することも、 ミリ秒とタイムゾーンまで詳細に表示することもできます。 以下のISO formatを使用でき、ユーザーが新しい値を選択した後も、 Ionic はdatetime値が最初に指定されたのと同じISOフォーマットを引き続き使用します。

Description Format Datetime Value Example
Year YYYY 1994
Year and Month YYYY-MM 1994-12
Complete Date YYYY-MM-DD 1994-12-15
Date and Time YYYY-MM-DDTHH:mm 1994-12-15T13:47
UTC Timezone YYYY-MM-DDTHH:mm:ssTZD 1994-12-15T13:47:20.789Z
Timezone Offset YYYY-MM-DDTHH:mm:ssTZD 1994-12-15T13:47:20.789+05:00
Hour and Minute HH:mm 13:47
Hour, Minute, Second HH:mm:ss 13:47:20

年は常に4桁、ミリ秒(利用している場合)は常に3桁、 その他は常に2桁となることに注意してください。 したがって、1月を表す数字の先頭には常に0 (01のように) が付きます。 また、時間は常に24時間形式であるため、00は12時間表記の12am131pm2311pmを意味します。

displayFormatpickerFormat のどちらも 入力された値 (コンポーネントの ngModel によって設定される値) を 任意のフォーマットで変更できないことにも注意してください。 書式は単に値をテキストおよびピッカーのインタフェースとして表示するためのもので、 日時の値は常に有効な ISO 8601 datetime の文字列として保持されます。

Datetimesの最大値と最小値

日付はどちらの方向にも無限であるため、 ユーザーが選択するには、選択できる日付を何らかの形で制限する必要があります。 デフォルトでは、最大の日付は現在の年の終わりまでで、 最小の日付は100年前の年の初めからです。

日時の最小値と最大値をカスタマイズするには、過去100年のデフォルト値ではなく、 アプリケーションのユースケースに適した min および max コンポーネントプロパティを指定します。 上の表と同じIS0 8601形式に従って、 各コンポーネントはユーザーが選択できる日付を制限できます。 minプロパティに 2016 を渡し、maxプロパティに 2020-10-31 を渡すことによって、 datetimeは2016年の初めから2020年の10月31日までの間の日付の選択を制限します。

月の名前と曜日名

現時点では、言語またはロケールに応じて、 月名または曜日名の正しい言語/スペルを 自動的に選択するための標準規格はありません。

The good news is that there is an Intl.DatetimeFormat standard which most browsers have adopted.

However, at this time the standard has not been fully implemented by all popular browsers so Ionic is unavailable to take advantage of it yet.

Additionally, Angular also provides an internationalization service, but it is still under heavy development so Ionic does not depend on it at this time.

The current best practice is to provide an array of names if the app needs to use names other than the default English version of month and day names. The month names and day names can be either configured at the app level, or individual ion-datetime level.

Advanced Datetime Validation and Manipulation

datetimeピッカーは、正確な書式を簡単に選択でき、 標準化された ISO 8601 datetime format を使用して、 日時の値を文字列として保持します。 ただし、 ion-datetime は、日時の値を検証および操作するときに、 すべての状況を解決しようとするわけではないことに注意してください。 datetimeの値を特定の形式から解析したり、操作したり(たとえば、 日付に5日進めたり、30分戻ったり)、 あるいは特定のロケールにデータをフォーマットしたりする必要がある場合は、 date-fns を使用してJavaScriptの日付を処理することを強くお勧めします。

利用方法

<ion-item>
  <ion-label>MMMM</ion-label>
  <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>MM DD YY</ion-label>
  <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Disabled</ion-label>
  <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>YYYY</ion-label>
  <ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="stacked">MMMM YY</ion-label>
  <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDD. MMM DD, YY (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-item>
  <ion-label>D MMM YYYY H:mm</ion-label>
  <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDDD MMM D, YYYY</ion-label>
  <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>HH:mm</ion-label>
  <ion-datetime displayFormat="HH:mm"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>h:mm a</ion-label>
  <ion-datetime displayFormat="h:mm a"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>hh:mm A (15 min steps)</ion-label>
  <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Leap years, summer months</ion-label>
  <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" [yearValues]="customYearValues"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Specific days/months/years</ion-label>
  <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
</ion-item>
@Component({})
export class MyComponent {
  customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
  customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
  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;
        }
      }]
    }
  }

}
<ion-item>
  <ion-label>MMMM</ion-label>
  <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>MM DD YY</ion-label>
  <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Disabled</ion-label>
  <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>YYYY</ion-label>
  <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="stacked">MMMM YY</ion-label>
  <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">MM/DD/YYYY</ion-label>
  <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
  <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
    display-format="DDD. MMM DD, YY"
    month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>D MMM YYYY H:mm</ion-label>
  <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>DDDD MMM D, YYYY</ion-label>
  <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>HH:mm</ion-label>
  <ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>h:mm a</ion-label>
  <ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>hh:mm A (15 min steps)</ion-label>
  <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Leap years, summer months</ion-label>
  <ion-datetime id="customYearValues" display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label>Specific days/months/years</ion-label>
  <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
var customYearValues = document.getElementById('customYearValues');
customYearValues.yearValues = yearValuesArray;

var dayShortNamesArray = [
  's\u00f8n',
  'man',
  'tir',
  'ons',
  'tor',
  'fre',
  'l\u00f8r'
];
var customDayShortNames = document.getElementById('customDayShortNames');
customDayShortNames.dayShortNames = dayShortNamesArray;

var customPickerButtons = {
  buttons: [{
    text: 'Save',
    handler: () => console.log('Clicked Save!')
  }, {
    text: 'Log',
    handler: () => {
      console.log('Clicked Log. Do not Dismiss.');
      return false;
    }
  }]
}
var customPickerOptions = document.getElementById('customPickerOptions');
customPickerOptions.pickerOptions = customPickerButtons;
import React from 'react';
import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react';

const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];

const customDayShortNames = [
  's\u00f8n',
  'man',
  'tir',
  'ons',
  'tor',
  'fre',
  'l\u00f8r'
];

export const DateTimeExample: React.FunctionComponent = () => (
  <IonContent>
    <IonItem>
      <IonLabel>MMMM</IonLabel>
      <IonDatetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>MM DD YY</IonLabel>
      <IonDatetime displayFormat="MM DD YY" placeholder="Select Date"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>Disabled</IonLabel>
      <IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>YYYY</IonLabel>
      <IonDatetime pickerOptions={{
          buttons: [
            {
              text: 'Save',
              handler: () => console.log('Clicked Save!')
            }, {
              text: 'Log',
              handler: () => {
                console.log('Clicked Log. Do not Dismiss.');
                return false;
              }
            }
          ]
        }}
        placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel position="stacked">MMMM YY</IonLabel>
      <IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
      <IonDatetime
        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"
      ></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>D MMM YYYY H:mm</IonLabel>
      <IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>DDDD MMM D, YYYY</IonLabel>
      <IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>HH:mm</IonLabel>
      <IonDatetime displayFormat="HH:mm"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>h:mm a</IonLabel>
      <IonDatetime displayFormat="h:mm a"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>hh:mm A (15 min steps)</IonLabel>
      <IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45"></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>Leap years, summer months</IonLabel>
      <IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues}></IonDatetime>
    </IonItem>

    <IonItem>
      <IonLabel>Specific days/months/years</IonLabel>
      <IonDatetime
        monthValues='6,7,8'
        yearValues='2014,2015'
        dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"
        displayFormat="DD/MMM/YYYY"
      ></IonDatetime>
    </IonItem>
  </IonContent>
);
<template>
  <ion-item>
    <ion-label>MMMM</ion-label>
    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>MM DD YY</ion-label>
    <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Disabled</ion-label>
    <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>YYYY</ion-label>
    <ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">MMMM YY</ion-label>
    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="floating">MM/DD/YYYY</ion-label>
    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label position="floating">MM/DD/YYYY</ion-label>
    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDD. MMM DD, YY (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-item>
    <ion-label>D MMM YYYY H:mm</ion-label>
    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDDD MMM D, YYYY</ion-label>
    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>HH:mm</ion-label>
    <ion-datetime displayFormat="HH:mm"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>h:mm a</ion-label>
    <ion-datetime displayFormat="h:mm a"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>hh:mm A (15 min steps)</ion-label>
    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Leap years, summer months</ion-label>
    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Specific days/months/years</ion-label>
    <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
  </ion-item>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';

  @Component()
  export default class Example extends Vue {
    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];

    customDayShortNames = [
      's\u00f8n',
      'man',
      'tir',
      'ons',
      'tor',
      'fre',
      'l\u00f8r'
    ];

    customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }
  }
</script>

プロパティ

cancelText

Description

The text to display on the picker's cancel button.

Attributecancel-text
Typestring
Default'Cancel'

dayNames

Description

Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.

Attributeday-names
Typestring | string[] | undefined

dayShortNames

Description

Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.

Attributeday-short-names
Typestring | string[] | undefined

dayValues

Description

Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the dayValues input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like 31 in February, it will correctly not show days which are not valid for the selected month.

Attributeday-values
Typenumber | number[] | string | undefined

disabled

Description

If true, the user cannot interact with the datetime.

Attributedisabled
Typeboolean
Defaultfalse

displayFormat

Description

The display format of the date and time as text that shows within the item. When the pickerFormat input is not used, then the displayFormat is used for both display the formatted text, and determining the datetime picker's columns. See the pickerFormat input description for more info. Defaults to MMM D, YYYY.

Attributedisplay-format
Typestring
Default'MMM D, YYYY'

doneText

Description

The text to display on the picker's "Done" button.

Attributedone-text
Typestring
Default'Done'

hourValues

Description

Values used to create the list of selectable hours. By default the hour values range from 0 to 23 for 24-hour, or 1 to 12 for 12-hour. However, to control exactly which hours to display, the hourValues input can take a number, an array of numbers, or a string of comma separated numbers.

Attributehour-values
Typenumber | number[] | string | undefined

max

Description

The maximum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, 1996-12-19. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as 1994. Defaults to the end of this year.

Attributemax
Typestring | undefined

min

Description

The minimum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, such as 1996-12-19. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as 1994. Defaults to the beginning of the year, 100 years ago from today.

Attributemin
Typestring | undefined

minuteValues

Description

Values used to create the list of selectable minutes. By default the minutes range from 0 to 59. However, to control exactly which minutes to display, the minuteValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be minuteValues="0,15,30,45".

Attributeminute-values
Typenumber | number[] | string | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

monthNames

Description

Full names for each month name. This can be used to provide locale month names. Defaults to English.

Attributemonth-names
Typestring | string[] | undefined

monthShortNames

Description

Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.

Attributemonth-short-names
Typestring | string[] | undefined

monthValues

Description

Values used to create the list of selectable months. By default the month values range from 1 to 12. However, to control exactly which months to display, the monthValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be monthValues="6,7,8". Note that month numbers do not have a zero-based index, meaning January's value is 1, and December's is 12.

Attributemonth-values
Typenumber | number[] | string | undefined

name

Description

The name of the control, which is submitted with the form data.

Attributename
Typestring
Defaultthis.inputId

pickerFormat

Description

The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use displayFormat.

Attributepicker-format
Typestring | undefined

pickerOptions

Description

Any additional options that the picker interface can accept. See the Picker API docs for the picker options.

Typeundefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; }

placeholder

Description

The text to display when there's no date selected yet. Using lowercase to match the input attribute

Attributeplaceholder
Typenull | string | undefined

readonly

Description

If true, the datetime appears normal but is not interactive.

Attributereadonly
Typeboolean
Defaultfalse

value

Description

The value of the datetime as a valid ISO 8601 datetime string.

Attributevalue
Typenull | string | undefined

yearValues

Description

Values used to create the list of selectable years. By default the year values range between the min and max datetime inputs. However, to control exactly which years to display, the yearValues input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be yearValues="2024,2020,2016,2012,2008".

Attributeyear-values
Typenumber | number[] | string | undefined

イベント

NameDescription
ionBlurEmitted when the datetime loses focus.
ionCancelEmitted when the datetime selection was cancelled.
ionChangeEmitted when the value (selected date) has changed.
ionFocusEmitted when the datetime has focus.

メソッド

open

Description

Opens the datetime overlay.

Signatureopen() => Promise<void>

CSSカスタムプロパティ

NameDescription
--padding-bottomBottom padding of the datetime
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime
--padding-topTop padding of the datetime
--placeholder-colorColor of the datetime placeholder
View Source