過去日付を入力できないようにする

過去日付を入力できないようにするサンプルをご紹介します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するイベント

• 申請入力画面イベント - パーツ値変更イベント

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
fidDate	日付パーツ

カスタマイズコード

(function () {
    'use strict';

    collaboflow.events.on('request.input.fidDate.change', function (data) {

        const now = new Date();
        const today = new Date(now.getFullYear(),now.getMonth(),now.getDate());
        const targetDate  = data.parts['fidDate'].value;

        if(targetDate === '') {
            return;
        }

        // 入力された日付が過去日付だった場合、パーツの値をクリアする。
        if(today > targetDate ) {
            window.alert('過去日付は入力できません。');
            data.parts['fidDate'].value = '';
            return false;
        }

        return true;
    });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定 > フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定 > 経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. 日付の値を変更します。
10. 過去の日付の場合、警告メッセージが表示され、入力した日付がクリアされます。

動作イメージ