ion-datetime

Datetimeコンポーネントはページの下部にPickerインターフェースを表示し、ユーザーが日付と時刻を簡単に選択できるようにします。ピッカーには、年、月、日、時間、分の値を個別に選択するために使用できるスクロール可能な列が表示されます。 Date オブジェクトを ISO datetime 形式で使用すると、 JSONオブジェクトとデータベース内でのシリアル化と解析が簡単になります。

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 と表示されます。 To change the display to use a different timezone, use the displayTimezone property described below.

Display Timezone

The displayTimezone property allows you to change the default behavior of displaying values relative to the user's local timezone. In addition to "UTC" valid time zone values are determined by the browser, and in most cases follow the time zone names of the IANA time zone database, such as "Asia/Shanghai", "Asia/Kolkata", "America/New_York". In the following example:

<ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>

CopyCopied

The displayed value will not be converted and will be displayed as provided (UTC).

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時間表記の12am、 13は1pm、23は11pmを意味します。

displayFormat と pickerFormat のどちらも入力された値 (コンポーネントの 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>

CopyCopied

@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;
        }
      }]
    }
  }

}

CopyCopied

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

CopyCopied

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;

CopyCopied

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react';

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

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

export const DateTimeExamples: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonDatetime Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonItem>
          <IonLabel>MMMM</IonLabel>
          <IonDatetime displayFormat="MMMM" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>MM DD YY</IonLabel>
          <IonDatetime displayFormat="MM DD YY" placeholder="Select Date" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>Disabled</IonLabel>
          <IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></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"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
          </IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="stacked">MMMM YY</IonLabel>
          <IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">MM/DD/YYYY</IonLabel>
          <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">MM/DD/YYYY</IonLabel>
          <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
          <IonDatetime
            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"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
          ></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>D MMM YYYY H:mm</IonLabel>
          <IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>DDDD MMM D, YYYY</IonLabel>
          <IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>HH:mm</IonLabel>
          <IonDatetime displayFormat="HH:mm" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>h:mm a</IonLabel>
          <IonDatetime displayFormat="h:mm a" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>hh:mm A (15 min steps)</IonLabel>
          <IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel>Leap years, summer months</IonLabel>
          <IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues} value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></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"
            value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
          ></IonDatetime>
        </IonItem>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          Selected Date: {selectedDate ?? '(none)'}
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

CopyCopied

import { Component, h } from '@stencil/core';

@Component({
  tag: 'datetime-example',
  styleUrl: 'datetime-example.css'
})
export class DatetimeExample {
  private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
  private customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
  private customPickerOptions = {
    buttons: [{
      text: 'Save',
      handler: () => console.log('Clicked Save!')
    }, {
      text: 'Log',
      handler: () => {
        console.log('Clicked Log. Do not Dismiss.');
        return false;
      }
    }]
  }

  render() {
    return [
      <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={this.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={this.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={this.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>
    ];
  }
}

CopyCopied

<template>
  <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 :picker-options="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 value="1995-04-15" min="1990-02" max="2000"
      :day-short-names="customDayShortNames"
      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 display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></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>
</template>

<script>
import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonDatetime, IonItem, IonLabel },
  setup() {
    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
    const customDayShortNames = [
      's\u00f8n',
      'man',
      'tir',
      'ons',
      'tor',
      'fre',
      'l\u00f8r'
    ];
    const customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }

    return {
      customYearValues,
      customDayShortNames,
      customPickerOptions
    }
  }
});
</script>

CopyCopied

プロパティ

cancelText
Description	The text to display on the picker's cancel button.
Attribute	`cancel-text`
Type	`string`
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.
Attribute	`day-names`
Type	`string \| 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. Defaults to: `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`
Attribute	`day-short-names`
Type	`string \| 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.
Attribute	`day-values`
Type	`number \| number[] \| string \| undefined`
disabled
Description	If `true`, the user cannot interact with the datetime.
Attribute	`disabled`
Type	`boolean`
Default	`false`
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`.
Attribute	`display-format`
Type	`string`
Default	`'MMM D, YYYY'`
displayTimezone
Description	The timezone to use for display purposes only. See Date.prototype.toLocaleString() for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
Attribute	`display-timezone`
Type	`string \| undefined`
doneText
Description	The text to display on the picker's "Done" button.
Attribute	`done-text`
Type	`string`
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.
Attribute	`hour-values`
Type	`number \| 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.
Attribute	`max`
Type	`string \| 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.
Attribute	`min`
Type	`string \| 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"`.
Attribute	`minute-values`
Type	`number \| number[] \| string \| undefined`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
monthNames
Description	Full names for each month name. This can be used to provide locale month names. Defaults to English.
Attribute	`month-names`
Type	`string \| string[] \| undefined`
monthShortNames
Description	Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.
Attribute	`month-short-names`
Type	`string \| 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`.
Attribute	`month-values`
Type	`number \| number[] \| string \| undefined`
name
Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`this.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`.
Attribute	`picker-format`
Type	`string \| undefined`
pickerOptions
Description	Any additional options that the picker interface can accept. See the Picker API docs for the picker options.
Type	`undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| 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
Attribute	`placeholder`
Type	`null \| string \| undefined`
readonly
Description	If `true`, the datetime appears normal but is not interactive.
Attribute	`readonly`
Type	`boolean`
Default	`false`
value
Description	The value of the datetime as a valid ISO 8601 datetime string.
Attribute	`value`
Type	`null \| 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"`.
Attribute	`year-values`
Type	`number \| number[] \| string \| undefined`

イベント

Name	Description
`ionBlur`	Emitted when the datetime loses focus.
`ionCancel`	Emitted when the datetime selection was cancelled.
`ionChange`	Emitted when the value (selected date) has changed.
`ionFocus`	Emitted when the datetime has focus.

メソッド

open
Description	Opens the datetime overlay.
Signature	`open() => Promise<void>`

CSS Shadow Parts

Name	Description
`placeholder`	The placeholder of the datetime.
`text`	The value of the datetime.

CSSカスタムプロパティ

Name	Description
`--padding-bottom`	Bottom padding of the datetime
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime
`--padding-top`	Top padding of the datetime
`--placeholder-color`	Color of the datetime placeholder

ion-datetime

cancelText

dayNames

dayShortNames

dayValues

disabled

displayFormat

displayTimezone

doneText

hourValues

max

min

minuteValues

mode

monthNames

monthShortNames

monthValues

name

pickerFormat

pickerOptions

placeholder

readonly

value

yearValues

open