カレンダーでの日付選択で、選択可能な日付を制限する方法

目次

1. はじめに
2. 実装方法
   3. カレンダーウィジェットのpropertiesから設定する
   4. コードで設定する
3. まとめ
4. 参考

はじめに

カレンダーウィジェットで、ユーザーが選択できる日付を制限したい時があると思います。
カレンダーの日付選択で選択可能な日付を制限する方法は

• カレンダーウィジェットのpropertiesから設定する
• コードで設定する

の2通りありますので、それぞれご紹介していきます！

実装方法

1. 画面作成
   まず、例として生年月日を入力してもらう画面を作成します。
   カレンダーウィジェットと、ユーザーに生年月日の入力を促すメッセージを配置します。
   

2. 選択範囲制限
   次に上記であげたそれぞれの方法で、日付の選択範囲を制限する方法を説明します。
   アプリの仕様や実装したい内容に合わせて、どちらかの方法を試してみてください！

方法1：カレンダーウィジェットのpropertiesから設定する

カレンダーウィジェットを選択すると画面右に表示されるpropertyのCalendarから選択可能な開始日と終了日を選択できます。
ただしこの方法だと日付を決め打ちになってしまいます。

今日から○年後以降は選択できないようにしたい！
△ヶ月以前は選択できないようにしたい！
...その場合は、次に紹介する方法を試してみてください。

方法2：コードで設定する

今回は、生年月日を入力するアプリなので100年前の1月1日から本日まで、入力範囲を制限してみましょう。

frmInputBirthdayController.js

define({ 
    onPreShow : function(){
    // カレンダー日付初期化(今日の日付を表示)
    var today = new Date();
    this.view.calBirthday.clearData();
    this.view.calBirthday.dateComponents = [today.getDate(), today.getMonth() + 1, today.getFullYear()];
    // 本日以降の日付を選択不可
    this.view.calBirthday.validEndDate = [today.getDate(), today.getMonth() + 1, today.getFullYear()];
    // 100年前の1月1日以前の日付を選択不可
    this.view.calBirthday.validStartDate = [1, 1, today.getFullYear() - 100];
  },
});

関数onPreShowの中に上記のようなコードを書きます。
validEndDateで選択終了日を[dd, mm, yyyy, hh, mm, ss]の配列で指定できます。
validStartDateで選択開始日も同様の配列で指定します。
dateComponentsはカレンダーに表示されるデフォルトの日付を指定できます。こちらも[dd, mm, yyyy, hh, mm, ss]の配列で指定できます。
フォーマットの配列のうちhh, mm, ss(時:分:秒)は特に指定されていない場合は00:00:00に設定されます。
もし時刻まで制限したい場合は使ってみてください！

次に関数(onPreShow)と画面(frmInputBirthday)をActionで紐付けます。
紐づけたいFormを選択しpropertiesのActionからpreShowのEditを選択します。
InvokeFunctionを選択しドロップダウンからonPreShowを選択すれば紐づけ完了です！

では実際にどうなるか見てみましょう。

pic.twitter.com/rhwX8TXeja

— Kony (@Kony12763790) December 9, 2020

指定した範囲内しか選択できないようになっているかと思います。

まとめ

今回のような生年月日の入力はもちろん、日付を入力する場面は多々あると思います。
その際、ユーザーに範囲内で選択して欲しい時に活用してみてください！
ご精読ありがとうございました！

参考

Calendar propertiesの説明：
validStardDateの説明
https://docs.kony.com/7_3/konylibrary/visualizer/viz_widget_prog_guide/Content/Calendar_Properties.htm#validSta
validEndDateの説明
https://docs.kony.com/7_3/konylibrary/visualizer/viz_widget_prog_guide/Content/Calendar_Properties.htm#validEnd
dateComponentsの説明
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Calendar_Basic_Properties.htm#dateComp