新規投稿
フォローする

【フォームブリッジ】日付フィールドに制限をかけたい

背景・実現したいこと

フォームブリッジに日付フィールドを設けています。

その日付フィールドには以下の制限をかけたいです。

 ①土日と指定日付(年末年始など)は選択不可

 ②フォームを入力している日付より前は選択不可

 ③フォームを入力している日付から平日の3日間をあけた日付から選択可能

 

エラー情報(開発者ツールのコンソール)

上記の①は設定できたのですが、②③が設定できません。

下記URLを参考に③を設定してみましたが、どの日付も選択可能になってしまいました。

(=エラー表示がされない状態)

https://developer.cybozu.io/hc/ja/community/posts/360016773086-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%81%A7%E6%9C%AC%E6%97%A5%E3%81%8B%E3%82%89%EF%BC%91%E3%83%B6%E6%9C%88%E4%BB%A5%E4%B8%8A%E5%BE%8C%E3%81%AE%E6%97%A5%E4%BB%98%E3%81%97%E3%81%8B%E9%81%B8%E6%8A%9E%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B

 

利用したソースコード

(function () {
  'use strict';

  fb.events.form.created.push(function (state) {
    console.log(state.fields);
    state.fields[00].validations.push({
      params: [],
      rule: 'custom_validation1'
    });
    return state;
  });

  fb.addValidators = function (state) {
    return {
      custom_validation1: {
        getMessage: function (fieldCode, params) {
          return '土日祝日、年末年始は選択できません。';
        },
        validate: function (value, params) {
          alart(value);
          var min_date = new Date();
        min_date.setDate(min_date.getDate() + 3);
          return min_date > new Date(value).getDate();

          var y = value.getFullYear();
          var m = ("00" + (value.getMonth()+1)).slice(-2);
          var d = ("00" + value.getDate()).slice(-2);
          var result = y + "-" + m + "-" + d;
          
          //土日選択不可
          if(value.getDay() =='0' || value.getDay() =='6'){
              return false;
          }else{
              //その他選択不可日
              return /^(?!(2022-01-01|....日付を列挙))/i.test(result);
          }
        }
      },
    };
  };
})();

 

JavaScript初心者でお恥ずかしいですが、ご教授いただければ幸いです。

よろしくお願い致します。

0

9件のコメント

Avatar
koichi

NKIさん

こんにちは。

 

①含めて順に回答します。

 

【エラー判定】

// フォーム入力日
var min_date = new Date();
var min_date_format = min_date.getFullYear() + "-" + ("00" + (min_date.getMonth() + 1)).slice(-2) + "-" + ("00" + min_date.getDate()).slice(-2);

 

①土日と指定日付(年末年始など)は選択不可

// 土日選択不可
if (value.getDay() == '0' || value.getDay() == '6' || /^(?!(2022-01-01|....日付を列挙))/i.test(result) == false) {
    flag = 1;
    return false;
}

 

②フォームを入力している日付より前は選択不可

// 当日より前は不可
if (result < min_date_format) {
flag = 2;
return false;
}

 

③フォームを入力している日付から平日の3日間をあけた日付から選択可能

// フォーム入力日の3日後
var date_after3 = new Date(min_date.setDate(min_date.getDate() + 3));
var date_after3_format = date_after3.getFullYear() + "-" + ("00" + (date_after3.getMonth() + 1)).slice(-2) + "-" + ("00" + date_after3.getDate()).slice(-2);
// 3日後より前は不可
if (result < date_after3_format) {
flag = 3;
return false;
}
 
④上記に該当しない場合(エラーなし)
validateのfunctionの末尾に記載が必要です。
return true;
 
【エラーメッセージ表示】
エラーメッセージを変えるためにflagで判断します。
fb.addValidators = function(state) {

    var flag = 0;

    return {
        custom_validation1: {
            getMessage: function(fieldCode, params) {
                switch (flag) {
                    case 1:
                        return '土日祝日、年末年始は選択できません。';

                    case 2:
                        return 'フォーム入力日より前の日付は選択できません。';

                    case 3:
                        return 'フォーム入力日の3日後より前の日付は選択できません。';
                }
            },

// 以下略
 
これらを組み合わせてコードを記載してみてください。
koichiにより編集されました
0
Avatar
ino

本日からフォームブリッジを使い始めたものです。。。

koichiさんのコードを組み合わせてみたのですが、うまく動作しませんでした・・・

具体的にどのように組み合わせれば良いか教えて頂けますでしょうか。

0
Avatar
koichi

inoさん
こんにちは。

差し支えなければ新規に投稿いただくこと可能ですか?
そちらに回答させていただきます。

その際に現在のコードも記載いただけると幸いです。

1
Avatar
NKI

koichi さん

 

こんにちは。いつもありがとうございます。

 

載せていただいたコードを自分で組み合わせてやっているのですが、うまくいきませんでした。

console画面でエラーが出ないようにはなったのですが、動作しないままです。

色々やってみて「できました」と報告したかったのですが、できないままで返信に時間がかかってしまい申し訳ありません。

 

自分で組んだコードは下記です。

state.fields[00]には、該当の数字を入れています。

(function () {
  'use strict';

  fb.events.form.created.push(function (state) {
    console.log(state.fields);
    state.fields[00].validations.push({
      params: [],
      rule: 'custom_validation1'
    });
    return state;
  });

  fb.addValidators = function(state) {

    var flag = 0;

    return {
        custom_validation1: {
            getMessage: function(fieldCode, params) {
                switch (flag) {
                    case 1:
                        return '土日祝日、年末年始は選択できません。';

                    case 2:
                        return 'フォーム入力日より前の日付は選択できません。';

                    case 3:
                        return 'フォーム入力日の3日後より前の日付は選択できません。';
                }
            },

        validate: function (value, params) {

          // フォーム入力日
          var min_date = new Date();
          var min_date_format = min_date.getFullYear() + "-" + ("00" + (min_date.getMonth() + 1)).slice(-2) + "-" + ("00" + min_date.getDate()).slice(-2);

          // フォーム入力日の3日後
          var date_after3 = new Date(min_date.setDate(min_date.getDate() + 3));
          var date_after3_format = date_after3.getFullYear() + "-" + ("00" + (date_after3.getMonth() + 1)).slice(-2) + "-" + ("00" + date_after3.getDate()).slice(-2);
          
          // 土日指定日選択不可
          if (value.getDay() == '0' || value.getDay() == '6' || /^(?!(2022-01-01|...日付列挙))/i.test(result) == false) {
              flag = 1;
              return false;
            }

          // 当日より前は不可
          else if (result < min_date_format) {
              flag = 2;
              return false;
            }

          // 3日後より前は不可
          else (result < date_after3_format) ;{
              flag = 3;
            //  return false;
            }
            
            return true;

        }
      },
    };
  };
})();

 

よろしくお願い致します。

1
Avatar
koichi

NKIさん

ご確認いただきありがとうございます。

 

以下はNKIさんが記載されたコードのまま変更ありませんので追記ください。

位置は「// 土日指定日選択不可」の上です。

// フィールドに入力された日
var y = value.getFullYear();
var m = ("00" + (value.getMonth()+1)).slice(-2);
var d = ("00" + value.getDate()).slice(-2);
var result = y + "-" + m + "-" + d;

 

また、最後の「flag = 3」の後の「return false;」がコメントアウトされてますので、こちらはコメント解除ください。

koichiにより編集されました
0
Avatar
NKI

koichi さん

 

ご確認、ご指摘ありがとうございます。

追記をし、「return false;」を修正しましたら、エラーメッセージが表示されるようになりました。

ありがとうございます!

 

1つだけ、『case3=③フォームを入力している日付から平日の3日間をあけた日付から選択可能』がうまく制御されませんでした。

フォーム入力日の平日3日間以降の平日すべてにcase3のエラーメッセージが出てしまいました。

何かまだ間違いがあるでしょうか?

 

よろしくお願い致します。

 

0
Avatar
koichi

NKIさん

見落としていました。

最後の条件文は「else」ではなく「else if」としてみてください。

また、その末尾の { の前にセミコロンが入ってますので、そちらも削除ください。

koichiにより編集されました
0
Avatar
NKI

koichiさん

やっとできました!!ありがとうございます!!

一人では絶対にたどり着けませんでした。

本当にありがとうございました。

自分でできるように勉強頑張りたいです。

1
Avatar
koichi

NKIさん

解決に繋がり何よりです。

 

 

inoさん

もし上記ご覧になってましたら、同じ内容で解決に繋がるかもしれませんのでご確認ください。

0
サインインしてコメントを残してください。