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

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

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

jQuery UIの導入について


基本の書式

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

HTML
inputタグ

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

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

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

 

日付の書式を変更する

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

(例)西暦/月/日に変更したい場合

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

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

 


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

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください