こんにちは、日本初のノーコードオンラインサロン「NoCodeCamp」のツバサ(@tsubasatwi)です。
今回は、Adalo で生年月日を入力するコンポーネント Date Picker の生年月日を入力する方法を解説していきます。
Adaloって何って方は、こちらのnoteでまとめてありますので確認下さい。
【初心者向け】ネイティブアプリを作れるAdalo(アダロ)とは?
DatePikerを導入するには?
DatePikerは、文字通り日付のフィールドを入れるものになります。
Forms&Fieldsにあります。
![](https://i.gyazo.com/59b82b266ee00b5aa9136d576dcdd9f5.png)
ところが、Dateなので、年フィールドの編集や修正ができません。
デフォルトのDatePikerの表示日付までしか入れられませんね。
![](https://i.gyazo.com/6f4ce1e52e9af6d3d100f485c02944d5.png)
上記だと、例えば生年月日を入力するときに不便ですよね?
なので、以下のように年も含めて更新できるようにしていきましょう。
![](https://i.gyazo.com/d5417f78859005d48933e5260a0a174b.png)
DatePikerで年も含めた修正をする方法
まず、DatePikerはデフォルトの状態では、年を修正できるようになってません。なので、DateのPropertyに紐づける必要があります。
![](https://i.gyazo.com/1fc30251e2bb214da923e9be88f7827e.png)
やり方は、とても簡単です。
DatePikerに対してUpdateするActionを作れば終わりです。例えばButtonを作って、DatepropertyをアップデートさせてあげるActionを作ります。
具体的な方法
Datepropertyを作成します。今回はUserDBの配下に作成します。
![](https://i.gyazo.com/20bd99621c27d60130f2a4d0de4d47e7.png)
DatePikerを作成します。この段階だと年は表示されてません。
![](https://i.gyazo.com/778c94bb549041c0b736eaa510d56536.png)
Buttonコンポーネントを作りましょう。 Actionには、Logged in Userで、先ほど作った Dateの日付にUpdateされるように作ってください。
![](https://i.gyazo.com/fbba2d564231e9186b24b142832aaceb.png)
操作はこれだけです。
Previewで表示した際には、年も含めて編集できているようになればOKです。
![](https://i.gyazo.com/358263254a3716f52a13e88ff6e7043b.png)