カレンダーから日付を選択するプラグインというと、jQueryUIのdatepickerが有名ですが、これのためだけにjQueryUIを入れるのもなぁ…という人や、見た目をいじりにくい（ロールエディタが使いにくい）なんて場合もあるかもしれません。

そんなときに便利かもしれない、jQueryのみで動作する「Zebra_Datepicker」をご紹介します。

Zebra_Datepickerについて

Zebra_Datepickerは、非常に軽量なjQueryプラグインながら、かなり細かいカスタマイズが行えるデイトピッカー ((カレンダーから日付を選んでフォームなどに日付を入力できる入力補助機能)) を提供してくれます。

使い方も簡単で、日付入力に使いたいフォームを指定して、

とするだけで動作させることができます。

尚、ライセンスはLGPLのようです。

では、具体的なインストール方法と、よく使いそうなカスタマイズについてご紹介します。

ダウンロードとインストール

まずはプラグインを手に入れないことには始まりませんので、ダウンロードしに行きましょう。

公式サイトのダウンロードからダウンロードします。

必要なのは、publicフォルダの中にあるファイル一式ですので、このフォルダを「zebra_datepicker」などという名前に変えて、導入したいサイトのファイルがあるところにコピーしておきましょう。

コピーしたら、導入したいページのヘッダー部に、今コピーしたフォルダの中にある、

1. zebra_datepicker.js(javascriptフォルダの中にあります)
   
2. default.css(cssフォルダの中にあります)

をサイトに読み込みます。

※因みにデフォルトでもう1つmetallicというテーマが用意されていますので、そちらを使いたい場合は、default.cssの代わりにmetallic.cssを読み込んで下さい。

以上でインストールは完了です。

実際に使ってみる

動作させるのは非常に簡単です。

まずは日付を入力するフォームを作り、任意のIDを振っておきましょう。

そして、スクリプトを書きます。

 これだけでOKです。

カスタマイズする

では、もう少しカスタマイズしてみましょう。

いずれも、

の中に書き、2個以上のパラメータを入れる場合は、行の最後に「,」を忘れずに。。 

入力される日付フォーマットを変更する

 format:’Y/m/d’

書き方ですが、

• supports most of date formats you can think of, borrowing the syntax of PHP’s date function

とありましたので、PHP等のカレンダーフォーマット ((date関数で利用する Y/m/d や、F js , Y みたいな形式。詳細は PHP: date – Manual をご覧ください)) と同じでいいはず。たぶん。

曜日を日本語にする

days:[‘日’,’月’,’火’,’水’,’木’,’金’,’土’]

daysの中に曜日名をシングルクォートで囲い、カンマ区切りにして入力します。つまり、配列で指定ってことですね。

順番は必ず「日曜日」から順に月、火…と進み、「土曜日」で終了します。

月名を日本語にする

months:[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]

monthsに「1月」から順に入力します。あとは曜日の時と一緒です。

「今日」を選択するボタンを日本語にする、または削除する

show_select_today:’今日’

ボタンを削除するばあいは

show_select_today:false

show_select_todayになにか文字列をセットすると、「Today」ボタンの文字を変更でき、falseを指定するとボタンそのものが消えるようになっています。便利ですね。

入力をクリアするボタンを日本語にする、または削除する

こちらも「今日」のときと同じにできるかとおもいきや、こちらは微妙に違います。

日本語にする場合は、

lang_clear_date:’削除’

そして、ボタンそのものを非表示にしたい場合は、

show_clear_date:false

です。微妙に違うので気をつけて下さい。

カレンダーを常時表示にする

他のプラグインもそうですが、このプラグインも、通常は「入力フォームがフォーカスされている時だけカレンダーが表示されます」。ですが、これをカレンダーを常時表示させておくことが出来ます。

やり方は、

always_visible:$(‘#datepick_container’)

となります。#datepick_containerは、好きなIDでOKです。このIDをもつ要素の中にカレンダーが生成されますので、ページにも予め同じIDの空DIVなどを用意しておく必要があります。

その他

この他、各種アクションごとにコールバック関数を呼ぶことができます。

例えば、カレンダーが選択された時になにかしたければ、

 削除ボタンが押されたら

といった具合です。

例えば、入力フォームを隠しておいて、値が入ったらフォームをフェードインさせて、日付が消されたらまたフェードアウトして隠すみたいなこともできるはずです。

その他にも豊富なオプションが用意されているようですので、一度公式サイトのドキュメントも目を通してみるといいと思います。

尚、見た目もテーマCSSを弄ることで簡単に変更できるようですよ。