カレンダーから日付を選択して入力する方法を検証しました。
いくつか方法はあるみたいですが、一番シンプルかつメジャーなdatepickerを今回は使用しています。
1. 実行例
左側のテキストボックスをクリックしたらカレンダーが表示され、日付を選択したら右側のテキストボックスにも日付がコピーされる処理を作ります。
2. コード
全体のコードは下記の通り。
jQuery UIの読み込み
datepickerはjQuery UIにて実装されているため、まずはjQuery UIを読み込みます。
また、カレンダーを日本語で表示するために、日本語ロケールファイルも読み込んでいます。
読み込みファイルについて、パスが様々なブログで異なっているのでプロジェクト利用時はダウンロードしてローカルから読み込むことをお勧めします。
※日本語ロケールを適用しないと、カレンダーが下記の表示になります。
テキストボックスにdatepickerを適用
テキストボックスに対してメソッド【datepicker()】を使用することで、テキストボックスをクリック後にカレンダーが表示されるようになります。また、カレンダーで選択した日付はテキストボックスに自動で設定されます。
なお、datepicker()メソッド内でロケールを設定することや、カレンダーのデザイン等を設定することも可能なようです。
日付選択後、何か処理を実行したい場合はメソッド【.change()】を用いることで実現できます。
上記コードでは、選択した日付を別のテキストボックスへセットしています。
カレンダーで日付選択後に画面を再描画したい場合等に活用できるかと。