こんにちは、最近社員インタビューに記載された「I.t」です。
今回はOutSystemsにてMonthPickerの表記を任意のフォーマットに指定する際に起きた問題と解決法を紹介します。
目次
▼MonthPickerとは
▼実現したいこと
▼Format項目に直接”YYYYMM”と指定してみる
▼対策法
▼まとめ
▼MonthPickerとは
MothPickerはOutSystemsUIモジュールに含まれるウィジェットであり
ユーザが年月を入力可能とするものになります。
▼実現したいこと
とある現場にて「表記を””YYYYMM””のフォーマットにしてほしい」との要件をいただきました。
例:2026年3月 → 202603
▼Format項目に直接”YYYYMM”と指定してみる
MonthPickerウィジェットにはDateFormatプロパティが存在する。
DateFormatに指定通り「”YYYYMM”」を設定し実行すると以下画像のような結果となってしまいます。
●何が起きているのか
MonthPickerの DateFormat に “YYYYMM” を設定したのに意図通り表示されないのは、
「YYYY」や「MM」が“1つのまとまり”として認識されていないためです。
●どう解釈されているか
本来は
YYYY → 年(2026)
MM → 月(03)
でも実際は
Y Y Y Y(バラバラ)
M M(バラバラ)
つまり
「Yを4回」「Mを2回」表示する指示だと誤解されています。
●なぜこうなるのか
多くのUIコンポーネント(MonthPicker含む)は
特定のフォーマットルール(例:Moment.js系)に従っています。
フォーマットとして認識されるには区切りや文脈が必要な場合があり
区切りがないと単なる文字列として1文字ずつ処理されることがあります。
▼対策法
フォーマットとして認識されるようにすればよいので
YYYYとMMの間に改行文字を挟み、一度区切ってしまうことで回避できます。
改行はInput上で表示されないため見た目は202603のように表示されます。
また、ビルドイン関数を用いて適切なフォーマットに変換することで意図した表示にすることも可能です。
▼まとめ
一見シンプルに見えるフォーマット指定でも内部の仕様によっては意図しない挙動になることがあります。
特にMonthPickerのようなUIコンポーネントは見た目と内部処理が分かれているため、「DateFormatだけで完結させる」のではなく「表示用と値の生成を分けて考える」ことが重要です。
同様の事象でハマった際の一つの参考になれば幸いです。