以下に、ion-datetimeのchangeイベントの使い方とコード例をいくつか紹介します。
- HTMLテンプレート内でのイベントハンドリング:
<ion-datetime (ionChange)="handleDatetimeChange($event)"></ion-datetime>
上記のコードでは、ionChangeイベントをion-datetimeコンポーネントに紐付けています。このイベントが発生した際には、handleDatetimeChange
という名前のメソッドが呼び出されます。
- TypeScriptでのイベントハンドラの実装:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ion-datetime (ionChange)="handleDatetimeChange($event)"></ion-datetime>
`
})
export class ExampleComponent {
handleDatetimeChange(event: CustomEvent) {
const selectedDate = event.detail.value;
console.log('Selected date:', selectedDate);
}
}
上記のコードでは、handleDatetimeChange
メソッド内で、選択された日付を取得してコンソールに出力しています。
これらのコード例を参考にしながら、ion-datetimeのchangeイベントを利用して、日付や時刻の変更をハンドリングする方法を実装してみてください。