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

※ 2016/3/10に更新しました。

日付を範囲で選択する場合に便利なbootstrap向け、日付のピッカーです。ライセンスはMITです。

使い方とオプションの説明はこちらをご確認下さい。

この導入と日本語化を行ったのでそのメモ書きです。

jqueryとbootstrapに依存しているので、これらを先に読み込みます。bootswatchになっている箇所は環境に合わせて置き換えてください。

<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cosmo/bootstrap.min.css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

次にmomentを使っているので、それを読み込みます。momentには日本語ファイルも付いているのでそれを利用します。

<!-- moment -->
<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>

CDN URL: https://cdnjs.com/libraries/moment.js/

次に本題のbootstrap-daterangepickerを読み込みます。

<!-- daterangepicker -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.18/daterangepicker.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.18/daterangepicker.min.js"></script>

CDN URL: https://cdnjs.com/libraries/bootstrap-daterangepicker

これでファイルの読み込みは完了しました。次にbootstrap-daterangepickerを初期化します。@current_date_rangeとある部分は、inputに入る初期値ですので置き換えて下さい。

    $(document).ready(function() {
      $('#daterange').daterangepicker({      
        startDate: '<%= @current_date_range.first.strftime("%Y-%m-%d") %>',
        endDate: '<%= @current_date_range.last.strftime("%Y-%m-%d") %>',
        format:'YYYY/MM/DD',
        showDropdowns: false,
        ranges: {
          '直近30日': [moment().subtract('days', 29), moment()],
          '今月': [moment().startOf('month'), moment().endOf('month')],
          '先月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
       },
       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)
      });
    });

これで日本語になっていると思います。

年月の部分が「10月 2014」と逆になっている箇所についてはオプションを与えてカスタマイズできる仕組みではなかったので、もしここも修正したい場合には以下ソースコードの688行目が該当する箇所に見えるので、ここを書き換える必要があります。

var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY"); // <-- たぶんここ！

Admin/管理画面系で良く使われているプラグインのようで、分かりやすく使いやすいのでおススメです。

質問などあればコメントにお願いします。