Bootstrap ベースの日付/時刻ピッカーを日本語環境向けにカスタマイズした jQuery プラグイン

Bootstrap が普及して以降、Bootstrap のデザインを基調とした jQuery プラグインをちらほら見かけるようになりました。 日付/時刻ピッカーの「Bootstrap Datetime Picker」もそんなプラグインの1つですが、今、仕事で開発してる Web アプリに使ってみたところ、いろいろとかゆいところがあったので、使いやすくなるようカスタマイズしてみました。

Bootstrap Datetime Picker の基本機能

Bootstrap Datetime Picker は、1つの入力フィールドに対し下記パターンで値をセットすることができます。

  1. 日付と時刻(YYYY/MM/DD HH:MI:SS)
  2. 日付のみ(YYYY/MM/DD)
  3. 時刻のみ(HH:MI:SS)

1 のように日付と時刻を入力する場合は、ダイアログの上下部に表示されるアイコンで選択画面を切り替えます。

Bootstrap Datetime Picker

Bootstrap,jQuery,bootstrap-datetimepicker を読み込み以下のよう実行します。

  1. <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
  2. <link href="bootstrap-datetimepicker.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  5. <script src="bootstrap-datetimepicker.min.js"></script>
  6. <script>
  7. $('#datetimepicker1').datetimepicker({
  8. format : 'yyyy/MM/dd hh:mm:ss'
  9. });
  10. </script>
  11. <div id="datetimepicker1" class="input-append">
  12. <input type="text"/><span class="add-on"><i></i></span>
  13. </div>

日付を選択した時にダイアログを閉じるようにする

一般的な日付ピッカーの場合、日付を選択したタイミングでダイアログが閉じますが、Bootstrap Datetime Picker の場合、選択後、ダイアログ以外の画面のどこかをクリックしないと閉じない仕様になっています。これは恐らく、日付と時刻の両方を指定する場合、日付選択後に時刻選択画面に切り替える必要があるからかと思います。

ですが純粋な日付ピッカーとして使用する場合、やはり不便ですので、以下のように記述することで、日付選択時にダイアログを閉じるようにすることができます。

  1. var api = $('#datetimepicker2').datetimepicker({
  2. format : 'yyyy/MM/dd',
  3. pickTime : false
  4. }).data('datetimepicker');
  5. api.widget.on('click','td.day',function(){
  6. api.hide();
  7. });

data() メソッドで API オブジェクトを取得し、日付選択時に、API で提供された hide() メソッドでダイアログを閉じるようにしてます。

日本語表示にする

日本語表示にするには、事前に $.fn.datetimepicker.dates に日本語設定をしておき、プラグイン実行時に language パラメータを指定します。

  1. $.extend($.fn.datetimepicker.dates , {
  2. ja: {
  3. days: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
  4. daysShort: ['日', '月', '火', '水', '木', '金', '土', '日'],
  5. daysMin: ['日', '月', '火', '水', '木', '金', '土', '日'],
  6. months: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
  7. monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
  8. }
  9. });
  10. $('#datetimepicker3').datetimepicker({
  11. format : 'yyyy/MM/dd hh:mm:ss',
  12. language : 'ja'
  13. });

時刻ピッカーの秒を非表示にする

Bootstrap Datetime Picker

時刻を入力する際、秒を指定するケースというのはあまり無いかと思われます。以下のように記述することで、時刻ピッカーの秒を非表示にすることができます。

  1. var api = $('#datetimepicker4').datetimepicker({
  2. format : 'hh:mm:ss',
  3. pickDate : false
  4. }).data('datetimepicker');
  5. api.widget.find('.timepicker-picker tr').each(function(){
  6. var td = $(this).find('td');
  7. td.eq(3).hide();
  8. td.eq(4).hide();
  9. });

API よりダイアログのコンテナ部(api.widget)を取得し、その中にある時刻ピッカーの秒表示の部分を非表示にしています。

分の選択画面の時間間隔を変更する

時刻ピッカーの画面で、時間の数字部を選択すると画面が切り替わり、一定間隔の時間一覧が表示され、いずれかの時間を選択することができます。

Bootstrap Datetime Picker

分を選択した場合、デフォルトでは何故か3分間隔の一覧が表示されます。アプリにもよるかと思いますが、一般的には 5分、10分、15分間隔あたりがよく使われると思います。以下のように記述することで、任意の時間間隔で表示させることができます。(以下例では5分間隔)

  1. $.fn.datetimepicker.Constructor.prototype.fillMinutes = function(){
  2. var minutesRange = 5;
  3. var minutesX = 4;
  4.  
  5. function padLeft(s, l, c) {
  6. if (l < s.length) return s;
  7. else return Array(l - s.length + 1).join(c || ' ') + s;
  8. }
  9. var hour = 60;
  10. var minutesCol = Math.floor((hour - 1) / minutesRange);
  11. var minutesY = Math.ceil(minutesCol / minutesX);
  12. var table = this.widget.find('.timepicker .timepicker-minutes table');
  13. table.parent().hide();
  14. var html = '';
  15. var current = 0;
  16. for (var i = 0; i < minutesY; i++) {
  17. html += '<tr>';
  18. for (var j = 0; j < minutesX; j += 1) {
  19. if(current < hour){
  20. var c = current.toString();
  21. html += '<td class="minute">' + padLeft(c, 2, '0') + '</td>';
  22. }
  23. else{
  24. html += '<td/>'
  25. }
  26. current += minutesRange;
  27. }
  28. html += '</tr>';
  29. }
  30. table.html(html);
  31. }
  32. $('#datetimepicker5').datetimepicker({
  33. format : 'hh:mm:ss',
  34. pickDate : false
  35. });

オリジナルのソースの fillMinutes メソッドを動的に上書きしてます。変数 minutesRange に分の間隔、minutesX に一行当たりに表示する分の数を指定します。

オリジナルのソースをラップし、カスタマイズ版としてプラグイン化してみる

上記のような記述を毎回するのも面倒なので、オリジナルのソースをラップしてプラグイン化してみます。

カスタマイズ版のデフォルトの動作は日付ピッカー

カスタマイズ版をパラメータを指定せず実行してみます。

  1. $('#datetimepicker1').datetimepicker_ja();

以下のような挙動となります。

  • 日付ピッカーとして動作
  • 日付選択時にダイアログが閉じる
  • 日本語表示

カスタマイズ版を時刻ピッカーとして起動する

時刻ピッカーとして起動する場合は、以下のように記述します。

  1. $('#datetimepicker2').datetimepicker_ja({
  2. format : 'hh:mm',
  3. pickDate : false,
  4. pickTime : true
  5. });

以下のような挙動となります。

  • 時刻ピッカーのダイアログで秒が非表示
  • 分の選択一覧が5分間隔

秒を表示させたい場合は、hideSeconds パラメータに false を指定します。

分の選択一覧の分間隔を指定する

minutesRange パラメータで分の選択一覧の分間隔を指定することができます。以下例では10分間隔にしてます。

  1. $('#datetimepicker3').datetimepicker_ja({
  2. format : 'hh:mm',
  3. pickDate : false,
  4. pickTime : true,
  5. minutesRange : 10,
  6. minutesX : 3
  7. });

minutesX パラメータには一行当たりに表示する分の数を指定することができます。

オリジナル版の挙動に影響なし

オリジナルのソースの動的な上書きをしてますが、挙動に影響はありません。

  1. $('#datetimepicker4').datetimepicker({
  2. format : 'yyyy/MM/dd hh:mm:ss'
  3. });

ダウンロード

こちらからどうぞ。