contactform7で日付の入力ボックスをどうにかしたい

contactform7で問い合わせフォームを多々作成するのですが、やはり日付の部分が問題になることが多いです。

標準でついているDATEは、HTML５のカレンダー入力を利用するのですが、これですとIE１１が非対応になる。

 

contactform7でHTML5のカレンダーが非対応の場合の対処

function.phpに追記

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

 

 

やっぱりこれだとHTML5のカレンダーを利用するので年数をプルダウンにしてほしいとかもろもろ対応できないです。

っていうことでjQuery UIのカレンダーを利用するのが良いかと思います。

 

WordPressにjQuery UIカレンダーを組み込む方法

function.phpに追記

・wp_enqueue_scriptsでアクション追加

   wp_enqueue_script('jquery-ui-core');
   wp_enqueue_script('jquery-ui-datepicker');

 

 

・filter追加

add_filter( 'wp_head', function() {

    ?>
    <script>
        jQuery( function() {
            jQuery( ".datepicker" ).datepicker({
                changeYear: true,  // 年選択をプルダウン化
                changeMonth: true,  // 月選択をプルダウン化
                showMonthAfterYear: true,//年を月の前にする
                yearRange: '-100:+0',//年の現在の年よりも100年前よりスタートする
            });
        } );
    </script
    <?php
} );

 

ていうことでjQuery UIのカレンダーが「.datepicker」というクラスで呼び出せるようになりました。

あとは、コンタクトフォーム7でテキストボックスで作成し、クラスに「.datepicker」を指定すればOKです。