Snow Monkey Formsに日付カレンダー「Flatpickr」を使う

Snow Monkey Formsに日付カレンダーを使う方法を色々調べて決めたのが「Flatpickr」でした

導入に簡単なのは「pikadate」ですけど、デザイン的に「Flatpickr」が好みでした

Snow Monkey Formsを導入済みで進めていきます

以下、「Snow Monkey Form」をSMFとします

参照サイト

Snow Monkey Forms に日付選択カレンダーを実装する方法

Flatpickrで日時入力をカレンダー表示にする

Flatpickrのインストール
カスタム用JSファイルを作成
1. カスタム用JSファイルを読み込む
Snow Monkey Formsへ実装
1. SMFを呼び出す
2. 初期値で日付を表示させたい場合
カレンダーに時間を追加する
時間をカレンダーとは別に表示させる
確認画面から戻った時もカレンダーを表示させる
時間をプルダウンで表示する

Flatpickrのインストール

今回はCDN方式でのインストール方法となります

特定のページのみに読み込ませたいので、function.phpに記述する方法を紹介します

尚、rpm方式についてはFlatpickrのGetting Started を参照してください

表示したいテーマの「function.php」に以下を追加します

function custom_calendar_enqueue_scripts() {
    if ( is_page('picker') ) {
        wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

    	  wp_enqueue_script('flatpickr-script', 'https://cdn.jsdelivr.net/npm/flatpickr');
    	  // 日本語ロケールの追加
        wp_enqueue_script('flatpickr-japanese', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js');
        
    }
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');

function custom_calendar_enqueue_scripts() {
    if ( is_page('picker') ) {
        wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

    	  wp_enqueue_script('flatpickr-script', 'https://cdn.jsdelivr.net/npm/flatpickr');
    	  // 日本語ロケールの追加
        wp_enqueue_script('flatpickr-japanese', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js');
        
    }
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');

PHP

特定の固定ページに読み込む方法です

if ( is_page(‘pikcer’) )
「picker」の部分は固定ページのスラッグ名になります

日本語ロケールについては任意です

カスタム用JSファイルを作成

カレンダーを表示させる為のカスタム用JSファイルを作ります

flatpickr('#js-datepicker', {
  locale     : 'ja',
  dateFormat : 'Y.m.d（D）', 
});

flatpickr('#js-datepicker', {
  locale     : 'ja',
  dateFormat : 'Y.m.d（D）', 
});

JavaScript

#js-datepicker 　任意のidかクラス名に変更可
　例）.js-date など
SMFでもこの名前を使います

locale :’ja’ 日本語化
dateFormat : ‘Y.m.d（D）’　表示される形式 Y-m-d(D) などでも可

上記を任意のファイル名.jsとして表示したい」テーマ以下のフォルダに保存します
このページでは「picker_custom.js」としています

オプションについては　Flatpickrのオプション　を参照してください

カスタム用JSファイルを読み込む

function.phpに以下を追加
上記で作成した「picker_custom.js」を読み込む方法です

wp_enqueue_script('pick_custom_js', get_template_directory_uri() . '/picker_custom.js', array(), '', true);
//wp_enqueue_script('pick_custom_js', get_stylesheet_directory_uri() . '/picker_custom.js', array(), '', true); //子テーマを使ってる場合はこちらを有効化

wp_enqueue_script('pick_custom_js', get_template_directory_uri() . '/picker_custom.js', array(), '', true);
//wp_enqueue_script('pick_custom_js', get_stylesheet_directory_uri() . '/picker_custom.js', array(), '', true); //子テーマを使ってる場合はこちらを有効化

PHP

get_template_directory_uri ：子テーマがない場合
get_stylesheet_directory_uri：子テーマがあり有効化している場合

どちらかを有効化してください

function.phpでの最終的な中身は以下になります

function custom_calendar_enqueue_scripts() {
    if ( is_page('picker') ) {
        wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

    	  wp_enqueue_script('flatpickr-script', 'https://cdn.jsdelivr.net/npm/flatpickr');
    	  // 日本語ロケールの追加
        wp_enqueue_script('flatpickr-japanese', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js');

        wp_enqueue_script('pick_custom_js', get_template_directory_uri() . '/picker_custom.js', array(), '', true);
        //wp_enqueue_script('pick_custom_js', get_stylesheet_directory_uri() . '/picker_custom.js', array(), '', true); //子テーマを使ってる場合はこちらを有効化
        
    }
    
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');

function custom_calendar_enqueue_scripts() {
    if ( is_page('picker') ) {
        wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

    	  wp_enqueue_script('flatpickr-script', 'https://cdn.jsdelivr.net/npm/flatpickr');
    	  // 日本語ロケールの追加
        wp_enqueue_script('flatpickr-japanese', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js');

        wp_enqueue_script('pick_custom_js', get_template_directory_uri() . '/picker_custom.js', array(), '', true);
        //wp_enqueue_script('pick_custom_js', get_stylesheet_directory_uri() . '/picker_custom.js', array(), '', true); //子テーマを使ってる場合はこちらを有効化
        
    }
    
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');

PHP

Snow Monkey Formsへ実装

Snow Monkey Formで任意のFormを作成後（既存のFormでも可）、上の画像の「希望日」の部分のように「テキスト」を追加し、右のサイドバーにある「id」に「js-datepicker」を入力
「js-datepicker」は上記のカスタム用jsファイルを作成で記入した「#js-datepicker」になります

上記の「#js-datepicker」の部分を「.js-datepicker」などクラス名にした場合、classに入力してください

日付を必須にするなら「バリデーション」をONにする

必要なら「placeholder」に「日付を選択してください」等を記入

※このページで紹介しているフォームスタイルは「Business」です

タイトルを分かりやすい名前で保存してください
このタイトル名を使ってフォームを呼び出します

SMFを呼び出す

SMFを表示したい固定ページ（picker）で上記のフォームを呼び出す
function.phpで設定した　if( is_page(‘picker‘) ){ などの固定ページ

表示したいのブロックで「Snow Monkey Form」を選択し、上記で作成したForm（タイトル）を選択
何もないところクリックするとフォームが表示されます
※一覧に表示されない場合は「すべてを表示」をクリックし、左のサイドバーから「Snow Monkey Form」を選択

この時点では動作確認はできません

保存して固定ページを表示してください

上記のように表示されれば成功です

デモページ

初期値で日付を表示させたい場合

オプションに「defaultDate: new Date()」を追加
上の行の最後にカンマを忘れないように

flatpickr('#js-datepicker', {
  locale     : 'ja',
  dateFormat : 'Y.m.d（D）', 
  defaultDate : new Date() // 入力エリアの初期値
});

flatpickr('#js-datepicker', {
  locale     : 'ja',
  dateFormat : 'Y.m.d（D）', 
  defaultDate : new Date() // 入力エリアの初期値
});

JavaScript

今日の日付が表示されます
「placeholder」を設定していてもこちらが初期値として優先されます

カレンダーに時間を追加する

上記で作成した「picker_custom.js」にて

flatpickr('#js-datepicker', {
  locale      : 'ja',
  dateFormat  : 'Y.m.d（D）H:i',   // 時間を追加
  enableTime  : true,             // 時間を表示させる
  minTime     : '05:00',          // 最小時間
  maxTime     : '18:00',          // 最大時間
});

flatpickr('#js-datepicker', {
  locale      : 'ja',
  dateFormat  : 'Y.m.d（D）H:i',   // 時間を追加
  enableTime  : true,             // 時間を表示させる
  minTime     : '05:00',          // 最小時間
  maxTime     : '18:00',          // 最大時間
});

JavaScript

「minTime」「maxTime」はオプションです。不要なら削除しても大丈夫です

デモページ　時間を追加する

時間をカレンダーとは別に表示させる

表示したいFormの「日付用テキスト」の後に、「時間用テキスト」を追加する
※「Snow Monkey Form」の「テキスト」

時間用テキストのidに「js-timepicker」などを記入
必要なら「placeholder」に「時間を選択してください」などを記入

横並びにするにはカラムを追加

横並びにするなら「カラム 50/50」を追加する

左のカラムに日付用テキスト　id「js-datepicker」
右のカラムに時間用テキスト　id「js-timepicker」　を追加

picker_custom.jsを書き換える

flatpickr('#js-datepicker', {
    locale      : 'ja',
    dateFormat  : 'Y.m.d（D）', 
});

flatpickr('#js-timepicker', {
    locale      : 'ja',
    enableTime  : true,  
    noCalendar  : true,
    dateFormat  : 'H:i', 
    time_24hr   : true,
    minTime     : '05:00',
    maxTime     : '18:00',
});

flatpickr('#js-datepicker', {
    locale      : 'ja',
    dateFormat  : 'Y.m.d（D）', 
});

flatpickr('#js-timepicker', {
    locale      : 'ja',
    enableTime  : true,  
    noCalendar  : true,
    dateFormat  : 'H:i', 
    time_24hr   : true,
    minTime     : '05:00',
    maxTime     : '18:00',
});

JavaScript

flatpickr('#js-timepicker', {
   locale      : 'ja',
   enableTime  : true,  
   noCalendar  : true,
   dateFormat  : 'H:i', 
   time_24hr   : true,
   minTime     : '05:00',
   maxTime     : '18:00',
   minuteIncrement: 30,
});

flatpickr('#js-timepicker', {
   locale      : 'ja',
   enableTime  : true,  
   noCalendar  : true,
   dateFormat  : 'H:i', 
   time_24hr   : true,
   minTime     : '05:00',
   maxTime     : '18:00',
   minuteIncrement: 30,
});

JavaScript

時間に関するオプション

time_24ht: true 24時間表記

minTime: ’05:00′
maxTime: ’18:00′
【5:00～18:00　まで表示】

minuteIncrement: 30　30分ごと　デフォルトは5分刻み

デモページ　時間の入力欄を分ける

確認画面から戻った時もカレンダーを表示させる

SMFは設定により「確認画面」が表示できるようになっています
しかし、上記のままではSMFの「戻る」を押した時、カレンダーが表示されません

そこでSMFの「戻る」を押した時にカレンダーを表示させデータも引き継がれるようにします

picker_custom.jsを以下に書き換える

function initFlatpickrs() {

    // 日付
    const dateInput = document.querySelector('#js-datepicker');

    if (dateInput && !dateInput._flatpickr) {

        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,

        });

    }

    // 時間
    const timeInput = document.querySelector('#js-timepicker');

    if (timeInput && !timeInput._flatpickr) {

        flatpickr(timeInput, {
            enableTime: true,
            noCalendar: true,
            dateFormat: 'H:i',
            time_24hr: true,
            minTime: '05:00',
            maxTime: '18:00',
            minuteIncrement: 30,
            defaultDate: timeInput.value || null
        });

    }
}

// 初回
document.addEventListener('DOMContentLoaded', initFlatpickrs);

// Snow Monkey Forms のDOM再生成にも対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true
});

function initFlatpickrs() {

    // 日付
    const dateInput = document.querySelector('#js-datepicker');

    if (dateInput && !dateInput._flatpickr) {

        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,

        });

    }

    // 時間
    const timeInput = document.querySelector('#js-timepicker');

    if (timeInput && !timeInput._flatpickr) {

        flatpickr(timeInput, {
            enableTime: true,
            noCalendar: true,
            dateFormat: 'H:i',
            time_24hr: true,
            minTime: '05:00',
            maxTime: '18:00',
            minuteIncrement: 30,
            defaultDate: timeInput.value || null
        });

    }
}

// 初回
document.addEventListener('DOMContentLoaded', initFlatpickrs);

// Snow Monkey Forms のDOM再生成にも対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true
});

JavaScript

確認画面を出すにはSMFの「フォーム設定」から「確認画面を使用する」をＯＮにしてください

デモページ　確認画面から戻った時もカレンダーを表示させる

時間をプルダウンで表示する

Flatpickrの時間はスピナー形式です。他の方法で表示するオプションもありません
他の方法で表示させるには独自に改造が必要になります

ここでは、「Snow Monkey Form + Flatpickr」で時間をプルダウンで表示する方法を紹介します

プルダウンで表示させる方法として２種類紹介します

Snow Monkey Formの確認画面を使う前提です

２種類のそれぞれのメリット、デメリット

	メリット	デメリット
SMFのselectを使う	確認画面は自動で適用バリデーションの設定も簡単	分単位のオプションを全て手作業で入力が必要デザインを変えたい場合、クラス名を探す必要がある
カスタムHTMLを使う	時間の分単位を簡単に設定できるデザイン変更が容易細かいカスタマイズが可能	javascriptによりoptionを生成する必要がある確認画面などもjavascriptにて行う cssを追加する必要がある

Snow Monkey Formのselectを使う

SMFのselectを追加
右サイドバーにある「options」に必要なだけ追加

“”:”時間を選択してください”
05:00
05:30
06:00
06:30
07:00

など

１行目を　””:”時間を選択してください” とすることで値が空になります
バリデーションを使う場合、エラーメッセージを表示させることができます

10分毎なら

“”:”時間を選択してください”
05:00
05:10
05:20
05:30

など

idに「js-timepicker」などを記入

jsファイルは以下になります

function initFlatpickrs() {
     // 日付
    const dateInput = document.querySelector('#js-datepicker');
    
    if (dateInput && !dateInput._flatpickr) {
        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,
        });
    } // 時間
}

// 初回 
document.addEventListener('DOMContentLoaded', initFlatpickrs);

// Snow Monkey Forms のDOM再生成にも対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true 
});

function initFlatpickrs() {
     // 日付
    const dateInput = document.querySelector('#js-datepicker');
    
    if (dateInput && !dateInput._flatpickr) {
        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,
        });
    } // 時間
}

// 初回 
document.addEventListener('DOMContentLoaded', initFlatpickrs);

// Snow Monkey Forms のDOM再生成にも対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true 
});

JavaScript

上記はSMFの確認画面を使う場合です

デモページ　時間をプルダウンで表示する　SMFのselectを使う場合

Javascriptを使ってoptionを追加する場合

SMFのぺーじにて「カスタムHTML」ブロックを追加
「コードを編集」をクリックして「HTMLタブ」にて以下を追加

<div class="time-wrap">
    <select id="js-timepikcer" required>
<option value="">時間を選択してください</option></select>
    <span id="js-timepicker-confirm"></span>
</div>

<div class="time-wrap">
    <select id="js-timepikcer" required>
<option value="">時間を選択してください</option></select>
    <span id="js-timepicker-confirm"></span>
</div>

HTML

コードを入力した後、更新をクリックし更にページ右上の保存も忘れずにクリック

picker_custo.jsを以下に書き換える

function initFlatpickrs() {
    // 日付
    const dateInput = document.querySelector('#js-datepicker');
    
    if (dateInput && !dateInput._flatpickr) {
        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,
        });
    }
    
    // 時間
    const select = document.querySelector('#js-timepicker');
    const confirm = document.querySelector('#js-timepicker-confirm');
    
    if (select.options.length > 1) return;
    
    // 現在の値を保持
    const currentValue = select.value;
    
    // optionが未生成なら作成
    if (select.options.length <= 1) {
        
        for (let hour = 5; hour <= 18; hour++) {
            ['00', '30'].forEach(minute => {
                if (hour === 18 && minute !== '00') return;
                const time = `${String(hour).padStart(2, '0')}:${minute}`;
                const option = document.createElement('option');
                option.value = time; option.textContent = time;
                
                if (time === currentValue) {
                    option.selected = true;
                } 
                
                select.appendChild(option);
            });
        }
    } 
    
    // 確認画面表示用
    if (confirm) {
        const updateConfirm = () => {
            confirm.textContent = 
                select.options[select.selectedIndex]?.text || '';
        };
            
        updateConfirm();
        select.removeEventListener('change', updateConfirm);
        select.addEventListener('change', updateConfirm);
     }
}
    
// 初回
document.addEventListener('DOMContentLoaded', initFlatpickrs);
    
// Snow Monkey Forms のDOM再生成対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true
});

function initFlatpickrs() {
    // 日付
    const dateInput = document.querySelector('#js-datepicker');
    
    if (dateInput && !dateInput._flatpickr) {
        flatpickr(dateInput, {
            locale: 'ja',
            dateFormat: "Y.m.d（D）",
            defaultDate: dateInput.value || null,
        });
    }
    
    // 時間
    const select = document.querySelector('#js-timepicker');
    const confirm = document.querySelector('#js-timepicker-confirm');
    
    if (select.options.length > 1) return;
    
    // 現在の値を保持
    const currentValue = select.value;
    
    // optionが未生成なら作成
    if (select.options.length <= 1) {
        
        for (let hour = 5; hour <= 18; hour++) {
            ['00', '30'].forEach(minute => {
                if (hour === 18 && minute !== '00') return;
                const time = `${String(hour).padStart(2, '0')}:${minute}`;
                const option = document.createElement('option');
                option.value = time; option.textContent = time;
                
                if (time === currentValue) {
                    option.selected = true;
                } 
                
                select.appendChild(option);
            });
        }
    } 
    
    // 確認画面表示用
    if (confirm) {
        const updateConfirm = () => {
            confirm.textContent = 
                select.options[select.selectedIndex]?.text || '';
        };
            
        updateConfirm();
        select.removeEventListener('change', updateConfirm);
        select.addEventListener('change', updateConfirm);
     }
}
    
// 初回
document.addEventListener('DOMContentLoaded', initFlatpickrs);
    
// Snow Monkey Forms のDOM再生成対応
new MutationObserver(initFlatpickrs).observe(document.body, {
    childList: true,
    subtree: true
});

JavaScript

for (let hour = 5; hour <= 18; hour++)　：　開始時間から終了時間

[’00’, ’30’].forEach(minute => {　10分毎にしたい場合は　[’00’,’10’,’20’,’30’,’40’,’50’] など追加

テーマのstyle.cssに以下を追加

#js-timepicker-confirm {
    display: none;
}

[data-screen="confirm"] #js-timepicker {
    display: none;
}

[data-screen="confirm"] #js-timepicker-confirm {
    display: inline;
}

#js-timepicker-confirm {
    display: none;
}

[data-screen="confirm"] #js-timepicker {
    display: none;
}

[data-screen="confirm"] #js-timepicker-confirm {
    display: inline;
}

CSS

「js-timepicker」と「js-timepicker-confirm」を間違えないようにしてください

デモページ　時間をプルダウンで表示する　jsでoptionを追加する

Flatpickrのインストール

カスタム用JSファイルを作成

カスタム用JSファイルを読み込む

Snow Monkey Formsへ実装

SMFを呼び出す

初期値で日付を表示させたい場合

カレンダーに時間を追加する

時間をカレンダーとは別に表示させる

確認画面から戻った時もカレンダーを表示させる

時間をプルダウンで表示する

２種類のそれぞれのメリット、デメリット

Snow Monkey Formのselectを使う

Javascriptを使ってoptionを追加する場合

コメント