jQueryUIで日付入力欄を実装するには、.datepickerを使用します。
サンプルソース
例１）デートピッカーサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryUIデートピッカーサンプル１</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script> $(function(){ //表示設定 $("#dp").datepicker({ dateFormat: 'yy/mm/dd', showButtonPanel: true, buttonImage: 'icon.jpg', buttonImageOnly: true, buttonText: "", showOn: "both", closeText: '閉じる', prevText: '前へ', nextText: '次へ', currentText: '今日', monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], dayNamesShort: ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'], dayNamesMin: ['日','月','火','水','木','金','土'], yearSuffix: '年', firstDay: 0 }); }); </script> </head> <body> <input type="text" id="dp" /> </body> </html> |
例２）デートピッカーサンプル（定義を使いまわすパターン）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryUIデートピッカーサンプル２</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script> $(function(){ //定義 $.datepicker.setDefaults({ dateFormat: 'yy/mm/dd', showButtonPanel: true, buttonImage: 'icon.jpg', buttonImageOnly: true, buttonText: "", showOn: "both", closeText: '閉じる', prevText: '前へ', nextText: '次へ', currentText: '今日', monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], dayNamesShort: ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'], dayNamesMin: ['日','月','火','水','木','金','土'], yearSuffix: '年', firstDay: 0 }); //表示設定 $("#dp1").datepicker(); $("#dp2").datepicker(); $("#dp3").datepicker(); }); </script> </head> <body> <input type="text" id="dp1" /> <input type="text" id="dp2" /> <input type="text" id="dp3" readonly="true" /> ←readonlyにすると </body> </html> |
オプションについては、下記「Datepickerのオプション」をご覧ください。
実行サンプル
↓フォーカスを当てると、カレンダーから日付が入力できます。
（readonly版 ※日付の手入力ができません。）
Datepickerのオプション
Datepickerの主要オプションです。
| dateFormat | 表示フォーマットを指定 例）dateFormat:'yy/mm/dd' |
| numberOfMonths | 表示するカレンダーの数を指定 例）３か月分表示する ⇒ numberOfMonths:3 |
| showCurrentAtPos | 初期表示時に今月を表示する位置を指定 例）２番目に表示する ⇒ 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:"ツールチップです" |
| closeText | 「Close」ボタンの表示名 |
| prevText | 「Prev」ボタンの表示名 |
| nextText | 「Next」ボタンの表示名 |
| currentText | 「Current」ボタンの表示名 |
| yearSuffix | 年の末尾に表示する文字 |
| monthNames | 月名 |
| monthNamesShort | 月名（短縮形） |
| dayNames | 曜日名 |
| dayNamesShort | 曜日名（短縮形） |
| dayNamesMin | 曜日名（最短形） |
解説
- テキストボックスに「readonly="true"」を指定すると、カレンダー選択のみ可能な日付入力欄になります。
関連サイト
- jQueryUI（Datepicker）公式ページ ⇒ https://jqueryui.com/datepicker/