🙌

[Ionic Angular] v6で新しくなったion-datetimeについて考える

2022/01/30に公開約3,400字

Ionic v5までは、 ion-datetime のデフォルトUIはWheelのみでしたが、iOSのアップデートに沿う形でPickerスタイルが追加されました。

wheel picker

紹介記事:

https://zenn.dev/rdlabo/articles/59278a50a7f0f7#datetime

なのですが、v6ででたばかりでサンプルが少なく、また実プロダクトへの王道な実装パターンがないため、どう実装しようかみたいな話を聞きます。そこで、複数パターンの実装をご紹介したいと思います。実際に動作するものは以下で公開しています。

https://ionic6-datetime-picker.netlify.app/

Accordion

Ionic v6で追加された ion-accordion と組み合わせるタイプです。

Image from Gyazo

ion-datetime はプレゼンテーションスタイルが現状で7パターンあります。

presentation: "date""date-time""month""month-year""time""time-date""year"

この中で、 "month" | "month-year" | "time" | "year" はWheelスタイルで、"date" | "date-time"| "time-date" がPickerスタイルとなっています。どれもがインラインスタイルで入れ込むことができますので、 ion-accordion の中にいれてみました。メリットとしては、次以降に紹介するModal、Popoverと違いオーバーレイでないため、「 ion-datetime を選択しながら他の部分を参照できる」という点があります。 ion-datetime を選びながら、タブを切り替えて他の情報を参照する、みたいなことができますよね。

こういうインラインにdatetimeを埋め込む方法は、Twitterなどで採用されています。

https://twitter.com/rdlabo/status/1480771495958032385

実装は以下の通りです:

https://github.com/rdlabo/ionic6-datetime-picker/blob/main/src/app/home/home.page.html#L24-L38

Accordion - multi

私の推しなのですが、 "month-year" と "date" を分けて選択させる以下のスタイルが気に入っています。これは、アコーディオンの開閉をボタンクリックでコントロールしています。

Image from Gyazo

本来だと date だけでいいのですが、Pickerだと先月・来月程度の選択だと便利なのですが「生年月日」になると以下のような手続きが必要です。

Image from Gyazo

  • まず左上の年月を選択する(この時点で難しい)
  • 年月を指定する
  • 左上の年月を選択して日付選択に戻る(これも難しい)
  • 日付を選択する

ちょっと現実的じゃないですよね。なので、 "month-year" と "date" を分けて流れで選択させるようにしています。今回はこの2つにしましたが、

  • year - month - 'date' の分割
  • date - time で分割

みたいなUIも考えることができますよね。以下のIssueから着想を得ています。

https://github.com/ionic-team/ionic-framework/issues/24477

実装は以下の通りです:

https://github.com/rdlabo/ionic6-datetime-picker/blob/main/src/app/home/home.page.html#L45-L64

インラインでModalを立ち上げる実装方法です。これは ionic-team/datetime-migration-samples でも紹介されているいわば正攻法なやりかた。

Image from Gyazo

実装方法はこちら:

https://github.com/rdlabo/ionic6-datetime-picker/blob/main/src/app/home/home.page.html#L72-L85

Popover

インラインでPopoverを立ち上げる実装方法です。これはIonicドキュメンテーションでの実装例として紹介されています。

https://ionicframework.jp/docs/api/datetime

クリックしたアイテムを起点として、オーバーレイでカレンダーを表示することができます。

実装方法はこちら:

https://github.com/rdlabo/ionic6-datetime-picker/blob/main/src/app/home/home.page.html#L92-L105

Wheelについて

現在、dateを指定するためにはPickerしか使えないのですが、Wheelを復活させる動きがあります。

https://github.com/ionic-team/ionic-framework/issues/23981

Ionic5までのWheelはパフォーマンス上の問題があったため、直接移植せずに、Pickerを優先させたが、続いてWheelでの選択ももっと拡充していくことを意思表明しています。「【ダメなUIについて】Androidの生年月日の入力フォームで使ってはいけないUIデザイン」 で議論されていますが、数十年前の特定日を単にPickerで選択するのはUIとして使いにくいので、よりよい形を考えていきたいですよね。

それではまた。

Discussion

ログインするとコメントできます