技術記事

micomia株式会社の井上です。今回はDate/Time Pickerについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Date/Time Pickerとは

Date/Time Pickerは日付、時間を選択するためのものです。プロフィール作成時の生年月日を入力する際によく使用されます。

2. Date/Time Pickerの使い方

今回は、以下のようにセットしたcontainerをタップすることでDate/Time Pickerを使えるようにします。

ActionsとしてDate/Time Pickerを選択します。

Date/Time Picker Typeは、Date=日付のみ、Date+Time=日付＋時間、Time=時間のみ、のいずれかのタイプを選択することができます。

その下にあるDefault Date/TimeはDate/Time Pickerを開いた時に表示されるデフォルトの時間を設定できます。これは特にこだわりがない限りCurrent Type(その時の時刻)のままで問題ありません。

Minimum Date/TimeとMaximum Date/Timeは選択できる日時の範囲を制限することができます。

Allow Past DateはONにすると過去の日付を選択可能になり、Allow Future Dateは未来の日付が選択可能になります。例えば、生年月日の入力を求める際、今が2025年だとすると2026年生まれは存在していないのでAllow Future DateはOFFにしておくのが適切です。

Use Cupertino-styleはONにするとiOSのスタイルでDate/Time Pickerを起動することができます。Androidのスタイルを使用したい場合はUse Cupertino-styleをOFFにしてUse Default ThemeをONにしてください。

また、iOSのスタイルを採用しているとAppearance Propertiesからカラーなどの詳細設定ができます。

これで一通りの設定は完了したので次は表示の設定です。今回は以下のように追加したTextに先ほどのDate/Time Pickerで選択した日付が表示されるようにします。

Textの変数としてDate/Pickedを選択することで表示されるようになります。

Available OptionsではDateTime Formatを使用することが一般的です。

DateTime Format Optionsではお好みのスタイルを選択できます。選択肢の中にない場合はCustomを選択します。

yyyyで西暦、MMで月、ddで日付を表示することができるのでお好みのスタイルを入力してください。今回はyyyy/MM/ddで設定します。

ここまで設定できたらConfirmを押すと内容が反映されます。

3. さいごに

今回はDate/Time Pickerについて解説していきました。日付の入力は意外と使われる場面が多いものなのでぜひ本記事を参考に実装してみてください。

本記事の内容を動画で観たい方は以下をご覧ください。