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

 

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

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

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

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

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

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

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

一番シンプルな基本形

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

【サンプル1】

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

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

【サンプル2】

スポンサーリンク

初期値の様々な設定

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

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

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

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

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

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

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

【サンプル4】

選択した日付をPHPに送信

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

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

【サンプル5】