AdminLTEのDate range pickerを日本語化して利用する方法

※今回はAdminLTEに入っていたDate range pickerを利用して確認したためその方法を記述しています。

1. 読み込む

AdminLTEに入っていたプラグインを読み込みます。
jQueryも必要です。

//head内
<link rel="stylesheet" href="/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
//</body>の前
<script src="/adminlte/plugins/daterangepicker/daterangepicker.js"></script>

＋日本語化のために以下もよみこみます。

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/locale/ja.js"></script>

momentのCDNはこちらから確認できます。
https://cdnjs.com/libraries/moment.js/

2. JavaScriptを記述

<script type="text/javascript">
    $('#reservation').daterangepicker({
       format:'YYYY/MM/DD',
       showDropdowns: false,
       opens: 'left',
       locale: {
         applyLabel: '選択',
         cancelLabel: 'クリア',
         fromLabel: '開始日',
         toLabel: '終了日',
         weekLabel: 'W',
         customRangeLabel: '自分で指定',
         daysOfWeek: moment.weekdaysMin(),
         monthNames: moment.monthsShort(),
         firstDay: moment.localeData()._week.dow
       }
      },
      function(s, e){
        console.log(s)
        console.log(e)
      });
</script>

参考：コピペで動く。bootstrap-daterangepickerの導入と日本語化

3. daterangepicker.jsの内容を変更

こちらを参考にさせていただきました！ありがとうございます。
Date Range Picker for Bootstrap のカレンダーの「月/年」のところのモンキーパッチ

以下を検索します。

var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY");

↓　置き換えます。

var dateHtml;

            if (this.locale.cancelLabel.match(/[A-Za-z]/)) {
                dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY");
            } else {
                dateHtml =  calendar[1][1].format("YYYY") + "年 " + this.locale.monthNames[calendar[1][1].month()]
            }

4. HTML

<div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" class="form-control pull-right" id="reservation" placeholder="期間を選択">
</div>