datepickerを簡単に実装する方法メモ。
datepickerの種類
datepickerは色々なライブラリで実装されています。bootstrap、jquery ui、jqueryなど。個人で同じようなものを作って公開している人もたくさんいます。
ただ、どれも導入手順がいまいち分かりづらかったりします。他にも、バージョンごとに使い方が変わったり、bootstrapやjqueryのバージョンがあがって動かなくなってたり。
現時点で調べた限りでは、bootstrap-datepickerというライブラリが、簡単に使えて機能も充実しているように思いました。
bootstrap-datepickerのデモ
bootstrap-datepickerのデモは開発者のサイトで公開されています。
bootstrap、jquery ui、jqueryで実装されたdatepickerについては、x-editableというライブラリのサイトで簡単なデモを見ることができます。
X-editable In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
x-editableのbootstrap版datepickerは、上記のbootstrap-datepickerを使っているようです。
bootstrap-datepickerの利用方法
bootstrap-datepickerはx-editableに組み込まれているので、x-editableを読み込むことでbootstrap-datepickerも簡単に使えるようになります。
色々なライブラリに依存するのがいやな人もいるかもですが、x-editable自体軽量ですし、インプレイスエディタを作る時普通に便利なので使っといて損はないと個人的には思います。
x-editableのJSとCSSを読み込んだら、下記のコードを実行するだけでdatepickerが使えるようになります。
$('#datepicker').datepicker({});
オプションが色々あって、日本語に対応したり、今日の日付をハイライトしたりできます。詳しくは公式サイトのデモをご覧になってください。
