jQuery UI:Datepicker

jQuery UI の Datepicker ウィジェットを使うと、簡単にカレンダーを使用した日付入力機能が実装できます。
細かいところまでカスタマイズしようとするといろいろと面倒なことも多いですが、かなりの部分までカスタマイズすることが出来ますので、カレンダーを用いた日付入力を実装するのであれば、まずは jQuery UI の datepicker が選択肢に挙がるかと思います。

公式サイトはこちら。

http://api.jqueryui.com/datepicker/

使用方法

まずは、jQuery UI を使える状態にします。
詳細は、jQuery UI を参照。

次に form 部分です。
日付入力ですから、通常は input type="text" な入力域を用意しますよね？
これを以下のように id 指定しておきます。

 <input type="text" id="datepicker">

あとは、JS の方で以下を実行。

 $("#datepicker").datepicker();

すると、上記のなんの変哲もない日付入力域で入力しようとしてフォーカスをあてると、カレンダーがポップアップされます。
そこで日付を選択すると、入力域にその日付が入力されるという動作になります。

なお、デフォルトだと日本語表示ではないですが、日本語表示にも対応できます。
その場合には、例えば以下のように CDN で日本語対応 JS を読み込みます。

 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

常時表示する

datepicker は、上記のようには入力域がクリックされた際にカレンダーがポップアップします。
そうではなく、常時表示したい際には以下のように div タグに対して datepicker を実行します。

 <div id="datepicker"></div>

選択された日付を取得

上記の常時表示するような時には入力域が存在しないため、選択された日付を取得して、それを処理しないといけません。
以下のようにすると、日付が選択された際のコールバック関数を定義することが出来ます。

 $("#datepicker").datepicker( {
        onSelect: function (date) {
            location.href='/xxxx/' + date + '.html';
        },
 } );

ちなみに、prev/next で年月が変更された際のコールバック関数も、以下のように定義することが出来ます。

       onChangeMonthYear : function(year, month, inst) {
            location.href='/xxxx/' + year + '/' + month + '.html';
        },

その他

datepicker は非常に多くのオプションがありますので、一度 http://api.jqueryui.com/datepicker/ で確認してみるとよいかも知れません。
かなりいろいろなことが出来ます。