はじめに
カレンダーコントロールについて色々調べた結果、datepickerに行き着いたので記事にしようと思いました。
FullCalendar.jsも無料版で色々やれそうで面白かったので、また別の記事でまとめていこうと思います。
datepickerって何？
jquery UIのライブラリに含まれるカレンダー表示機能。
こんな感じのカレンダーを低いコストで実装できる。
datepickerの実装方法
jquery UIはCDNで実装できる。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
この2行をソースコードに追加するだけでdatepickerを実装できる。
後はdatepickerメソッドを呼び出すだけ。
<h3>date pickerを試す</h3>
<input type="text" id="currender_1">
<script>
$('#currender_1').datepicker();
</script>
この状態だと、datepickerには初期値が設定されていない。
datepickerには色々なメソッドが用意されており、初期値の設定にはsetDateを使う。
<script>
const datetime = new Date();
const datetime_today = datetime.getFullYear() + "-" +
(datetime.getMonth() + 1) + "-" +
datetime.getDate();
$('#currender_1').datepicker({dateFormat: 'yy-mm-dd'});
$("#currender_1").datepicker("setDate", datetime_today);
</script>
これで最初から値を入れることができる。
一応、コードの意図を説明すると
new Date()でJavascriptのDateオブジェクトを生成している。
datetime.getMonth() + 1 の意図は値の開始地点が0～なので、1を足して実際の月と合わせている。
datepickerの日本語化
日本語化もCDNで対応できる（便利）。
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
先程、記述したCDN読み込み時のソースコードに上記を付け足すだけで日本語化できる。
datepickerのデザイン変更
datepickerには様々なデザインが用意されており、デザインを変更するにはCDN読み込み時のコードを変えるだけ。
その一例を示すと、
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
上記のコードのbaseの部分をstartに変更するだけ。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.min.css">
これだけで表示されるカレンダーのデザインが変わる。
最後に
実装のハードルの低さを鑑みると、簡易的なカレンダーコントロールの実装にはdatepickerがお勧めなのかなと感じました。
オプションも豊富で選択できる期間の制限もかけることが出来たりします。
ただ、カレンダーにスケジュールなどのイベントを追加するってなると、FullCalendar.jsや自作で作った方がいいのではと感じました。