jQuery UIカレンダープラグインDatepickerの使い方

2018/12/14 ITよろず, WordPress

jQuery uiのカレンダープラグインであるDatepickerがとても便利なのでWordPressでの使い方を少し記載します。
Datepickerは他のjavascriptプラグインと同様にscriptを読み込むように宣言しておけば使えますが、ここではWordPressに特化した使用方法を記載します。
WordPressはパッケージに標準でjQueryおよびjQuery ui関連プラグインは読み込めるようになっています。WordPressのバージョンによってそれらプラグインのバージョンも異なると思われます。そして、常に最新バージョンではないかもしれません。確実に最新バージョンを使いたい場合は、そのバージョンに合わせたscript宣言を他のjavascriptと同様に記述した方がいいでしょう。

なのでWordPressを使ってこれらを使用できるようにするには、function.phpに以下のように記述します。

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

ただ、jQuery UIテーマのデザインを使用するためにはスタイルシートを別途指定する必要があります。使用したいDatepickerのデザインを以下のように指定しますが、WordPressに同梱されているjQuery UIのバージョンと同じバージョンのCSSを使うようにするためjquery-ui-coreのバージョン番号を指定しています。URLのパスにjQuery UIのテーマ名を記述します。以下の例はSmoothnessテーマを指定しています。

global $wp_scripts;
$ui = $wp_scripts->query('jquery-ui-core');
wp_enqueue_style('jquery-ui-css’, "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.css");

＊上記以外のデザインはここを参照
http://jqueryui.com/themeroller/

＊Google Hosted Librariesはここを参照
https://developers.google.com/speed/libraries/?hl=ja#jquery-ui

また、日本語のDatepickerを使う場合は以下を追記します。

wp_enqueue_script('jquery-ui-js-ja', '//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js');

これでWordPressで作ったサイトにjavascriptコードを記載すればDatepickerが使えます。
Datepciker提供元はこちらを参照
http://jqueryui.com/datepicker/

一番シンプルな基本形

Datepickerはフィールドに日付を入力するのにカレンダーから選択する使用方法が基本です。これを実現するのは以下の記述で簡単にできます。

<script>
$( function() {
    $( "#datepicker" ).datepicker();
} );
</script>
<input type="text" id="datepicker">

選択日の表示フォーマットを指定

カレンダーから選択した日付の表示フォーマット指定することもできます。

<script>
$( function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).on( "change", function() {
        $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
});
</script>
<input type="text" id="datepicker" size="30">
<select id="format">
<option value="mm/dd/yy">デフォルト - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="yy年MMd日(D)">yy年MMd日(D)</option>
<option value="指定日はyy年MMd日のDDです。">テキスト - yy年MMd日のDD</option>
</select>

初期値の様々な設定

日付の表示フォーマット以外にも様々な初期値を設定することができます。以下の例は、
１．今日以前の日付を指定できないようにする

minDate: ‘0y’

２．今日より一年の指定だけを指定できるようにする

maxDate: ‘+1y'

３．日付の表示フォーマットを年月日(曜日)にする

dateFormat: ‘yy年MMd日(D)'

これらを以下のように指定します。

<script>
$( function() {
    $( "#datepicker" ).datepicker({
        minDate: '0y', //今日以前は選択不可
        maxDate: '+1y', //１年後までが選択可能
        dateFormat: 'yy年MMd日(D)', //年月日（曜日）
    });
});
</script>
<input type="text" id="datepicker">

＊これら以外にも様々な設定ができるのでjQuety UIサイトを参照してください。
http://jqueryui.com/datepicker/

カレンダーのインライン表示

カレンダーを表示した状態で使用します。

<script>
$( function() {
    $( "#datepicker" ).datepicker({
        minDate: '0y', //今日以前は選択不可
        maxDate: '+1y', //１年後までが選択可能
        dateFormat: 'yy年MMd日(D)', //年月日（曜日）
    });
});
</script>
<div id="datepicker"></div>

選択した日付をPHPに送信

選択した日付を使ってWordPress側で処理をするために、PHPへ選択した日付を送信します。

<script>
$( function() {
    $( "#datepicker" ).datepicker({
        minDate: '0y', //今日以前は選択不可
        maxDate: '+1y', //１年後までが選択可能
        dateFormat: 'yy年MMd日(D)', //年月日（曜日）
        onSelect: function(dateText, inst) {
            $("#date_val").val(dateText);
        }
    });
});
</script>
<form name="send_date" method="post" action="">
<input type="hidden" name="input_date" id="date_val">
<div id="datepicker"></div>
<input type="submit" id="sample" value="送信">
</form>

PHP側でPOST送信した日付を受信します。

<?php
$sampledate = (isset($_POST['input_date'])) ? $_POST['input_date'] : '';
if ($sampledate) {
    echo '日付送信成功！ '.$sampledate;
} else {
    echo '日付は送信されてません。';
}
?>

 

シェアする

, , ,