JavaScript

2018年12月3日 / 最終更新日時 : 2018年12月3日 JavaScript

【jQuery UI】 Datepickerで入力フォームにカレンダーを表示する

日付の入力フォームの値をカレンダーから選択出来るDatepickerウィジェットの導入についてメモ。

Datepickerを利用するにはjQuery UIプラグインをあらかじめ使用出来るようにしておきます。

基本の書式

カレンダーを表示したい入力フォームに使用しているidまたclassをセレクターに指定する。
inputタグのtype属性はtextとする。

HTML
inputタグ

<label for="datepicker">日付: <input type="text" id="datepicker"></label>

1	<label for="datepicker">日付: <input type="text" id="datepicker"></label>

JS
inputタグに指定したidをセレクターにする。

$(function(){
  $("#datepicker").datepicker({});
});

1

2

3

$(function(){

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

});

カレンダーから日付を選ぶと、

入力フォームに日付の値が入ります。

日付の書式を変更する

datepickerではデフォルトの日付の書式は 月/日/西暦 となっていますが、
任意の書式に変更することができます。

（例）西暦/月/日に変更したい場合

dateFormatというプロパティに書式を指定します。

– (ハイフン)を指定することも可能です。

$(function(){
  $("#datepicker").datepicker({
    dateFormat:'yy-mm-dd'
  });
});

1

2

3

4

5

$(function(){

$("#datepicker").datepicker({

dateFormat:'yy-mm-dd'

});

使用するテーマ (sytlesheet) によってカレンダーの外観を変えることもできます。
テーマの変更についてもこちらの記事をご確認ください。

その他のオプションはこちらから確認できます。

Follow me!