micomia株式会社の井上です。
今日はFlutterFlowで日付の入力をする方法について解説していきます。
1.日付入力の機能実装方法
このように日付の入力画面があったとします。
「日付を選択する」ボタンを押して日付を選択後、上のtext(現在はHello Worldと表示)に日付を表示させるイメージです。今回は、2025-10-29を表示させていきます。
まず、日付を選択してもらうにはDate/Time PickerというActionを実装します。
2. 入力した日付の表示方法
Date/Time Pickerを実装できたら、次は上のtextに選択した日付が表示できるように実装していきます。
textのInitial ValueにWidget StateからDate Pickedを選択します。
すると、何を表示させるかの選択肢が出てくるので今回はDate Time Formatを選択します。
ちなみに、下にあるDateTime to Unix Timestampはその日付が1970年1月1日から何ミリ秒経過しているかを表示させることになります。
次に、DateTime Format Optionを選択します。
日付を入力する際の形式として、yyyyは年、MMは月、ddは日付を表しています。ちなみに、時間はHH、分はmmで表すことができます。
今回は2025-10-29と表示させたいので、yyyy-MM-ddをフォーマットとして使用します。
選択肢の中にはないので、Customを選択します。
すると、Custom Formatを入力する欄が現れるのでここに先ほどのyyyy-MM-ddを入力します。
入力すると、Previewにも同じ形式で表示されているのでこのままConfirmを押します。
この状態でテストをしてみます。
Date/Time Pickerで10月29日を選択して、
OKを押すと、無事日付が表示されました。
3. 最後に
日付選択は少し複雑な部分もありますが、多くの場面で使用する機能なのでうまく活用していきましょう。
.jpg%3Falt%3Dmedia%26token%3Da3c76743-713e-48e5-945a-601a7438cb5c&w=3840&q=75)
.jpg%3Falt%3Dmedia%26token%3D910d6567-e2cd-4ea5-ad8a-07d925ce700b&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3D856fae6b-5eed-41e0-993c-4a053186faf5&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3Def6b9919-f6ea-4ed8-924b-90f297e0549b&w=3840&q=75)
.png%3Falt%3Dmedia%26token%3D8e864089-6895-4bb1-b90d-d607b8416753&w=3840&q=75)
