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: 月と日に異なる名前を使用する方法については、後述の
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>
The displayed value will not be converted and will be displayed as provided (UTC).
Picker Format
pickerFormat
プロパティは、Pickerインタフェースに表示する列、
列の順序、および各列内で使用する形式を決定します。
pickerFormat
が指定されていない場合は、
displayFormat
の値が使用されます。
フォーマットの例については、
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>
@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, { 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>
);
};
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>
];
}
}
<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>
プロパティ
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:
|
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
|
Attribute | day-values |
Type | number | number[] | string | undefined |
disabled | |
Description | If |
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
|
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
|
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,
|
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
|
Attribute | min |
Type | string | undefined |
minuteValues | |
Description | Values used to create the list of selectable minutes. By default
the minutes range from
|
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
|
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
|
Attribute | picker-format |
Type | string | undefined |
pickerOptions | |
Description | Any additional options that the picker interface can accept.
See the |
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 |
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
|
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 |