【kintone】日付データの入力制限にはmoment.jsを活用しよう

日付データの入力制限にはmoment.jsが便利です。

以下の記事が使い方がよくまとまっています。

実際に入力制限を行うプログラムで解説します。

(function() {
    "use strict";
    //開始日のチェック
    function startDateCheck(event) {
        // event よりレコード情報を取得します
        let rec = event['record'];
        //エラーの初期化
        rec['開始日']['error'] = null;

        let start_date_value = rec['開始日']['value'];
        if (start_date_value) {
          let today = moment();
          let startDate = moment(start_date_value);

          if (startDate.format("DD") == "01" && startDate.isAfter(today)) {
          //開始日が月初 かつ 開始日が未来日 OK
          //ex. today=2020/01/05,開始日=2020/02/01
          } else {
          //エラー処理
            rec['開始日']['error'] = '日付を1日かつ未来日で入力してください。';
          }
        }
    }
    //変更イベント
    kintone.events.on(['app.record.create.change.開始日',
                      'app.record.edit.change.開始日',
                      'app.record.index.edit.change.開始日'], function(event) {
                            startDateCheck(event);
                            return event;
                        });

})();

今回のケースは日にちが1日かつ未来日であるかをチェックするプログラムです。

日付データ(フィールドコード：開始日)とします。

startDateCheck関数で実際チェックするプログラムです。

startDateCheck関数内でまず開始日のデータを取得します。

値が設定されていたら、今日日付(today)と開始日のデータでmomentライブラリを呼び出します。

        let start_date_value = rec['開始日']['value'];
        if (start_date_value) {
          let today = moment();
          let startDate = moment(start_date_value);

以下コードで1日かつ未来びの条件に合致するかをチェックしています。

          if (startDate.format("DD") == "01" && startDate.isAfter(today)) {
          //開始日が月初 かつ 開始日が未来日 OK
          //ex. today=2020/01/05,開始日=2020/02/01
          } else {
          //エラー処理
            rec['開始日']['error'] = '日付を1日かつ未来日で入力してください。';
          }
        }

startDateCheck関数を呼び出すタイミングを以下で定義しています。

    //変更イベント
    kintone.events.on(['app.record.create.change.開始日',
                      'app.record.edit.change.開始日',
                      'app.record.index.edit.change.開始日'], function(event) {
                            startDateCheck(event);
                            return event;
                        });

レコードの新規作成の際に日付データ(開始日)が変更された場合、

レコードの変更の際に日付データ(開始日)が変更された場合、

レコードの一覧画面で日付データ(開始日)が変更された場合で実行されます。