作成日:2018-09-17, 更新日:2022-06-17
基本
・「jquery-ui.min.js」と「jquery-ui.css」の読み込み必要
・対象となるinputタグを指定してDatepickerを使う。
<script> $( function() { $( '#datepicker' ).datepicker(); } ); </script> <input type="text" id="datepicker">
予測変換OFF
カレンダーの上に予測変換のヤツが被って・・・邪魔。だから・・・消えてもらいたい。
<input type="text" id="datepicker" autocomplete="off">
カレンダーやinputタグ内の表記(日本語表記)
$.datepicker.regional['jp'] = { isRTL: false, prevText: '<前', nextText: '次>', 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: ['日','月','火','水','木','金','土'], weekHeader: '週', dateFormat: 'yy-mm-dd', firstDay: 0, showMonthAfterYear: true, yearSuffix: '年', //showButtonPanel: true, //closeText: '閉じる', }; $.datepicker.setDefaults( $.datepicker.regional[lang] ); $(〇〇〇).datepicker();
inputタグ内の表記
上記の「dateFormat」のトコを変更する
曜日を使いたいなら「D」「DD」のどちらかを使う感じ
→inputタグ内に曜日だ入ると・・・formで飛ばされる値にも曜日が含まれるのでサーバ側の処理が何かしなくちゃいけないと思われる(※未調査)
▼公式より
d - day of month (no leading zero) dd - day of month (two digit) o - day of the year (no leading zeros) oo - day of the year (three digit) D - day name short DD - day name long m - month of year (no leading zero) mm - month of year (two digit) M - month name short MM - month name long y - year (two digit) yy - year (four digit) @ - Unix timestamp (ms since 01/01/1970) ! - Windows ticks (100ns since 01/01/0001) '...' - literal text '' - single quote anything else - literal text
何かを追加したい
▼下記のような感じ
$(〇〇〇).datepicker(処理)
指定日 or 過去を選択不可
「指定日 or 過去を選択不可」ってのは「指定日以降 or 今日以降を選択可能」となる。
▼「minDate」を使って日付指定。
var tmpMethod = ({ minDate: '2018-09-17', // 2018-09-17から選択可能 }); $(〇〇〇).datepicker(tmpMethod);
▼単純に過去としたいとき
var tmpMethod = ({ minDate: 0, // 今日の日付から選択可能 }); $(〇〇〇).datepicker(tmpMethod);
3ヵ月分表示
var tmpMethod = ({ numberOfMonths: 3, // 表示月数:3ヵ月分 showCurrentAtPos: 1, // 表示位置:左から2番目 (中央) stepMonths: 3, // 月の移動:3ヶ月単位 //showButtonPanel: true, // ボタン領域を表示 //gotoCurrent: true // ボタン領域に「今日」ボタンを表示(ボタン領域非表示なら表示されない) }); $(〇〇〇).datepicker(tmpMethod);
「日にちを変更した」というイベントを拾う
var tmpMethod = ({ onSelect: function(dateText) { alert(dateText); } }); $(〇〇〇).datepicker(tmpMethod);
▼直接入力されたときのイベントも考えると下記のような感じ
$(〇〇〇).('input', 〇〇〇, function(){ alert($(this).val()); }); var tmpMethod = ({ onSelect: function(dateText) { alert(dateText); } }); $(〇〇〇).datepicker(tmpMethod);
他
直接入力禁止
▼inputタグ側で制御する
<input type="text" readonly="true">
時間も指定したい1
・「DateTimePicker」を参照。
→bootstrap4だと少し微妙な感じ。
時間も指定したい2
▼bootstrap4でもOKなDatetime Picker
・本体 - Tempus Dominus Bootstrap 4 Datetime Picker」が本体
・日本語化 - moment.js/ja.js
→本体の「docs/index.html」をベースに自分のサイト用に作り替える
「ja.js」だと「一月」という漢字表記。
数字表記がいいなら・・・「ja.js」をダウンロードして「1月」と書き換える。
※他に設定で変更できると思うけど、未調査。
▼土日の色と、HTMLと呼出し
<style> .datepicker-days th.dow:first-child, .datepicker-days td:first-child { color: #f00; } .datepicker-days th.dow:last-child, .datepicker-days td:last-child { color: #00f; } </style> <div class="input-group date" id="〇hoge〇" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#〇hoge〇" name="xxxx" /> <div class="input-group-append" data-target="#〇hoge〇" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> $('#〇hoge〇').datetimepicker({ dayViewHeaderFormat: 'YYYY年 MMMM', format: 'YYYY-MM-DD HH:mm', locale: 'ja', showClose: true });