jQuery UI プラグイン

[jQuery UI] 日付入力欄を実装する(Datepicker)

投稿日:

jQueryUIで日付入力欄を実装するには、Datepickerを使用します。

サンプルソース

例1)デートピッカーサンプル

例2)デートピッカーサンプル(定義を使いまわすパターン)

オプションについては、下記「Datepickerのオプション」をご覧ください。

実行サンプル

↓フォーカスを当てると、カレンダーから日付が入力できます。


(readonly版 ※日付の手入力ができません。)

Datepickerのオプション

Datepickerの主要オプションです。

【Datepicker主要オプション】
dateFormat表示フォーマットを指定
 例)dateFormat:'yy/mm/dd'
numberOfMonths表示するカレンダーの数を指定
 例)3か月分表示する ⇒ numberOfMonths:3
showCurrentAtPos初期表示時に今月を表示する位置を指定
 例)2番目に表示する ⇒ showCurrentAtPos:1 ※numberOfMonthsで複数指定していないと意味がない
stepMonths前後ボタンをクリック時に移動する月数
 例)前後ボタンクリック時に半年移動する ⇒ stepMonths:6
showButtonPanelカレンダーの下に[当日]ボタンと[決定]ボタンを表示するかどうか
 true:表示する false:表示しない(デフォルト)
firstDay週始めの曜日を指定 0~6:日~土
 例)月曜始まりとする⇒firstDay:1
changeYearコンボボックスで年の変更を可能とするかどうか
 true:可能とする false:可能としない(デフォルト)
changeMonthコンボボックスで月の変更を可能とするかどうか
 true:可能とする false:可能としない(デフォルト)
buttonImageアイコン画像を指定
※アイコンを表示するには、showOnに"button"または"both"が指定されている必要があります。
 例)buttonImage:'image/cal.png'
showOnカレンダーを表示するイベントを指定
 "focus":テキストボックス選択時のみ
 "button":アイコンクリック時のみ
 "both":両方
buttonImageOnlyアイコン画像をボタン上に表示するか否か。
 true:ボタンは非表示 false:ボタンも表示
buttonTextアイコンに表示するツールチップ
※ツールチップが不要の場合は未設定とする
 例)buttonText:"ツールチップです"
【Datepicker表示系オプション】
closeText「Close」ボタンの表示名
prevText「Prev」ボタンの表示名
nextText「Next」ボタンの表示名
currentText「Current」ボタンの表示名
yearSuffix年の末尾に表示する文字
monthNames月名
monthNamesShort月名(短縮形)
dayNames曜日名
dayNamesShort曜日名(短縮形)
dayNamesMin曜日名(最短形)

解説

  • テキストボックスに「readonly="true"」を指定すると、カレンダー選択のみ可能な日付入力欄になります。
  • jQueryUI(Datepicker)公式ページ ⇒ https://jqueryui.com/datepicker/

スポンサーリンク

スポンサーリンク

-jQuery UI, プラグイン

執筆者:


comment

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

関連記事

[jQuery UI] プログレスバーを実装する(Progressbar)

jQueryUIでプログレスバーを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったプログレスバーサ ...

[jQuery UI] ボタンを実装する(Button)

jQueryUIを使ったボタンサンプルです。 サンプルソース 例)jQuery UIを使ったボタンサンプル [crayo ...

[jQuery UI] トグルボタンを実装する(Button)

jQueryUIでトグルボタンを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったトグルボタンサンプ ...

[jqGrid] 指定したセルに色をつける

jqGridで指定したセルに色をつけるサンプルです サンプルソース 例)2行目の金額列に色をつける [crayon-5b ...

[jQuery UI] オートコンプリートを実装する(Autocomplete)

jQueryUIのオートコンプリートを使ったサンプルです。 サンプルソース 例)ボタンを押すと使用中のjQueryUIの ...

スポンサーリンク