【Bubble】時間設定の落とし穴!?Date Time Pickerの極意

皆さんこんにちは。NoCodeエンジニアのRyoです。
普段は現役高専生としてロボット工学を学びながら、NoCodeCampのBubbleエキスパートとして、受託開発やコーチング事業などを行っています。

今回は、想像以上に奥が深いBubbleの時間設定のコツ、そしてDate Time Pickerの使い方について解説していこうと思います!

今回の記事は比較的短めの記事となっておりますので、通勤通学時のスキマ時間や、ちょっとの休憩時間にサクッと読んでいただけるとありがたいです!

それでは早速行ってみましょう!

Date Time Picker 日付選択の落とし穴

早速ですが、皆さんBubbleのDate Time Pickerで日付のみを設定すると、裏側で何時で設定されているかご存知ですか?

上のようにDate Time Pickerとその値を表示させるためのテキストを設置して、Date Time Pickerのinput typeを[Date]にします。
この状態で、プレビューしてみると…

こんな感じで実は日付のみを入力していても裏側では時間設定も一緒にされているんです!
そして、日付のみを設定した場合、時間設定は自動で[12:00 am]つまり午前0時になるわけです。

このことが理解できると日付の絞り込みなどの処理の正確性が格段に上がってきます。
少しみていきましょう!

今回PostというData Typeを作成し、記事のタイトルと日付を設定できるようにしました。
左側の開始日、終了日のDate Time Pickerを使って開始日〜終了日までに投稿された記事のみを右側に表示させるという処理を作ってみたいと思います。

弟子募集やマンツーマンコーチングなどで教える際、多くのBubblerの方が間違えているのがこちらの設定です。
この状態で絞り込みを行おうとすると、終了日の設定が思うようにいかなくなります。例えば…

こんな形で終了日を設定すると、19日の記事が表示されなくなってしまいました。
これがなぜなのかというと、end dateに指定している日付の時間が[12/19 00:00まで]になってしまっているため、終了日に指定した日付のデータは出てこなくなってしまします。

この状態だと上のように、開始日と終了日を同じ日付で指定してしまうと何のデータも出てこなくなってしまいます。
しかし、実はちょっとした工夫でこの問題を解決することができるんです。

それがこちらのRepeating Groupでのend date設定の変更です。
具体的に変わったところはdateの後の不等号が[<=]から[<]に変わり、end dateのvalueに+(days):1を追加しました。

この少しの手間により、「終了日の0:00まで」となってしまった絞り込みを「終了日の翌日の0:00以前」というような表現に変えることが可能になります。

これによって先ほどの終了日の不具合を修正することができました!

少しの手間暇によって日付の絞り込みが格段に使いやすく変わるので、是非ともお試しあれ!!

おまけ

Date Time Pickerの使い方に関してよく「Date Time Pickerの表示設定がアメリカ表記から日本表記に変える方法がわからない」という声をよく聞くので、こちらの解説を少ししようと思います。

こんな感じで一見表示設定の変更項目なんてどこにもないですよね…
これ実はStyle設定の方に設定項目が隠されているんです。

右下のStyleの[Edit style]からStyle設定に行くと、一番上にDate formatという項目があります。
ここを[Custom]に設定してあげると、任意の時間表示設定をすることが可能です。

[yyyy年mm月dd日]とすると、2021年05月03日みたいな感じで数字が1桁だった時は前に0が入りますが、
[yyyy年m月d日]とすると2021年5月3日のように0を入れない設定をすることも可能です!(もちろん数字が2桁だった場合は24日のように2桁表示してくれます)

告知

2022年1月中旬より、Bubblerの技術向上を全力で後押しするBubble専門オンラインサロン【Bubble研究室】をリリースします!

公式Bubbleフォーラムを日本語ベースでまとめたウィークリーレポートの発信や、プラグイン周りのサポートなどBubblerが自分の作りたいアプリを作るために豊富なサポートをご用意しております。

また、「マンツーマンで作りたいアプリをサポートしてほしい!」「もっといろんなTipsや深い技術を学びたい!」という方のためにマンツーマンコーチングのプランもご用意しております。

是非ともご検討ください!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次