【jQuery UI】 Datepickerで入力フォームにカレンダーを表示する
日付の入力フォームの値をカレンダーから選択出来るDatepickerウィジェットの導入についてメモ。
Datepickerを利用するにはjQuery UIプラグインをあらかじめ使用出来るようにしておきます。
基本の書式
カレンダーを表示したい入力フォームに使用しているidまたclassをセレクターに指定する。
inputタグのtype属性はtextとする。
HTML
inputタグ
1 |
<label for="datepicker">日付: <input type="text" id="datepicker"></label> |
JS
inputタグに指定したidをセレクターにする。
1 2 3 |
$(function(){ $("#datepicker").datepicker({}); }); |
カレンダーから日付を選ぶと、
入力フォームに日付の値が入ります。
日付の書式を変更する
datepickerではデフォルトの日付の書式は 月/日/西暦 となっていますが、
任意の書式に変更することができます。
(例)西暦/月/日に変更したい場合
dateFormatというプロパティに書式を指定します。
– (ハイフン)を指定することも可能です。
1 2 3 4 5 |
$(function(){ $("#datepicker").datepicker({ dateFormat:'yy-mm-dd' }); }); |
使用するテーマ (sytlesheet) によってカレンダーの外観を変えることもできます。
テーマの変更についてもこちらの記事をご確認ください。
その他のオプションはこちらから確認できます。