見出し画像
Photo by satoshi_st

MyASP(マイスピー)の登録フォームでカレンダーの日付入力を使う方法

ばむもり

マイスピーの設定をしていると、すごくかゆいところまで手が届くんだけど、もうちょっとこっちも…と思うことが時々あります。

その一つが、登録フォームでカレンダー入力が使えないことです。

日付入力ってカレンダーで入力できたらすごく直感的で操作しやすいので、お申し込みフォームでセミナーの日付とかを選択させるのにカレンダーでできたら嬉しいですよね？

こんなかんじで入力できたら幸せになりますよね

そこで今回は、ちょっと設定にコピペするだけで、登録フォームでカレンダー日付入力ができるようにする方法をご紹介します。

１．事前準備

1-1．マイスピーの登録フォームデザインを開く

カレンダー日付入力の仕組みを導入したいシナリオのシナリオ管理メニューから登録フォームデザインを開きます。

1-2．「カスタムフッター」をクリックして開く

登録フォームデザイン設定画面の下の方にある「カスタムフッター」をクリックして、カスタムフッターの入力フォームを表示させます。

1-3．次のコードを貼り付けて保存する

カレンダー入力システムのコードが下のコードになります。
これをまずは全部選択してコピーしてください。

（カレンダーの仕組みにはflatpickrというものを使っています。本体はcdnっていう公開されているところから持ってくるのでマイスピーにも負担がかかりません。）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
<script>
$(function(){
  // イベントウェビナーの入力フォームからデータを取得します。
  var days = $('#UserEventDatetime').find('option');
  var daytime_list = [];
  var day_list = [];
  for(var i=0;i<days.length;i++){
    // 各データの日付と時間を分離して保持します
    var event_array = days[i].value.split(' ');
    var event_date = event_array[0];
    var event_time = event_array[1];
  
    if( !Array.isArray(daytime_list[event_date]) ){
      daytime_list[event_date] = [];
      day_list.push(event_date);
    }
    daytime_list[event_date].push(event_time);
  }
  
  // イベントウェビナーの書式をリセットします
  var event_init_day = $('#UserEventDatetime').val();
  
  $('#UserEventDatetime').replaceWith('<input type="hidden" name="data[User][event_datetime]" id="UserEventDatetime" value="' + event_init_day + '">');
  $('#UserEventDatetime').after('<input name="js_event_datetime" id="JsEventDatetime" class="payment_method_select"  style="width:12em;">　<select name="js_event_time" class="payment_method_select" id="JsEventTime"></select>');
  
  // カレンダーの割当
  flatpickr('#JsEventDatetime', {
    locale      : "ja", // 日本語用モジュールを適用
    dateFormat  : 'Y/m/d（D）', // 2022/01/23（月）の形式で表示
    defaultDate : new Date(), // 入力エリアの初期値
    enable      : day_list,
    minDate     : day_list[0],
    maxDate     : day_list[day_list.length-1],
    defaultDate : day_list[0],
    onChange    : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0]),
    onClose     : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0]),
    onReady     : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0])
  });
  
  function selectTimeChangeByDate(selectedDate){
    if(!selectedDate){
      return;
    }
    const time=$('#JsEventTime');
    if(!time){
      return;
    }
    time.empty(); // 中身を空にしてから
  
    // 該当日のデータを追加
    const selectDay = formatDate(selectedDate);
  
    if( selectDay in daytime_list ){
      addTimeList(daytime_list[selectDay]);
    }
    
    $('#UserEventDatetime').val(selectDay + ' ' + $('#JsEventTime').val());
  }
  
  $('#JsEventTime').on('change',function(){
  	var selectDay = $('#JsEventDatetime').val().substr(0,10).replaceAll('/','-');
    $('#UserEventDatetime').val(selectDay + ' ' + $('#JsEventTime').val());
  });
});

//日付をフォーマット YYYY-MM-DD
function formatDate(date) {
  const year  = date.getFullYear();
  const month = date.getMonth() + 1;
  const mm    = ('00' + month).slice(-2);
  const day   = date.getDate();
  const dd    = ('00' + day).slice(-2);
  return `${year}-${mm}-${dd}`;
}

function addTimeList(time_array){
  var optionDom='';
  for(var i=0;i<time_array.length;i++){
    optionDom += '<option value="' + time_array[i] + '">' + time_array[i] + '</option>';
  }
  $option = $(optionDom);
  $('#JsEventTime').append($option);
}
</script>

そしたら、開いたカスタムフッターに貼り付けて、保存します。

これで、カレンダー入力フォームを利用する準備が完了しました。

２．日付入力のためにイベントウェビナー機能を利用する


2-1．イベントウェビナー画面を開く

シナリオ管理メニューに戻って、イベントウェビナー画面を開きます。

2-2．使用するをクリック

「使用する」をクリックすると、イベント日付を入力するフォームが表示されます。

↓

2-3．イベント日付を設定する

イベント開催する日付が決まっている場合には、
「開催周期モード」を「指定日」のまま、「指定日」欄の「＋追加」をクリックして日付を入力しまくります。

開催する日が定期的に決まっている場合には、
「毎週○曜日」とか「毎日」とかを選択して曜日や時間を入力します。

今回は毎週火、木曜の10時〜と15時〜の週に４回開催のイベントがあるとして設定をしてみます


忘れちゃいけないのが、開催日の表示件数の設定。
これを間違えると、「一番最初の１回分しか表示されないんだけど？？？」ってなっちゃいます。

表示させたい件数分に設定します。今回は２０回分とか表示させちゃいますね。

ここの１を２０にします。

もう一つ忘れちゃいけないのが開催期間の設定。
これをちゃんとやらないと、登録フォームを開いたときにエラーがでちゃいます。だいたいここを忘れていることがエラー原因になります。

終了日時を遠い未来の日付に設定しておきます。

ここの終了日時を2099年とかにしちゃいます。

で、保存します。

３．登録フォームを表示して確認する

ここまできたら、シナリオ管理メニューの登録フォームを表示ボタンから登録フォームをクリックします。

そうすると、こうなって…

日付をクリックすると、こうなります

日付の入力部分と時間の入力部分が別れていて、
日付を選択すると、その日付の入力できる時間だけが時間の選択肢に表示されます。

４．おまけ

このままだと、確認画面で選択したイベント日付が表示されません。
こんな感じになっちゃいます…

なので…
シナリオ管理メニューの「登録フォームデザイン」から確認ページの設定を変更します。

「確認ページHTML」のタブをクリックして

本文のところの、「メールアドレス」のところまでスクロールして、

メールアドレスの部分をコピーして、
イベントの開催日の表示を追加します。

よくわかんない場合はこのコードをコピペしてください。

    <!-- 開催日 -->
    <div class="input_unit  required">
        <div class="my_column my_left">
            <div class="label_frame">
                <label class="form_input_label">開催日</label>
            </div>
        </div>
        <div class="my_column my_right">
            <div class="confirm_value">%event_datetime_and_dayofweek_jp%</div>
        </div>
    </div>

メールアドレスの下のここに貼り付けます。

下の保存ボタンを押して、もう一度、登録フォームを表示しなおして確認画面までいくと…

幸せになれました。

よくわかんないよーと言う場合にはTwitterからご連絡いただければ対応できると思います。ご連絡ください！

設定代行は基本的に有償で対応していますが、マイスピーの使い方をZoomで教えてほしいよーという場合は無償で対応していることが多いです。
ぜひお声掛けください！


この記事が気に入ったらサポートをしてみませんか？