bootstrapのdaterangepicker(datepicker)を日本語化して少しカスタマイズ？して使う方法メモ

はじめに

タイトルのとおりですが知っていればかなり便利でした。
次回もサクっと使えるようにメモしておきます

使うもの

・jQuery
・Bootstrap
・bootstrap-daterangepicker
・moment.js

準備

jqueryとbootstrapはCDNを使用
bootstrap-daterangepickerはこちらからダウンロード
mmoment.jsはこちらの「moment+locale.js」からダウンロード

実装

daterangepickerを実装します。
今回のちょっとしたカスタマイズ？は
・各種ボタンとカレンダーを日本語化
・各種ボタンの色を変えてみる

イメージ
f:id:yoppy0066:20160126144955p:plain

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- jqueryとbootstrapを読み込む -->  
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- DLしたmoment.jsを読み込む -->
    <script src="/js/moment-with-locales.min.js"></script>

    <!-- DLしたdatepicker.jsを読み込む -->
    <script src="daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="daterangepicker.css" />

    <!-- 色を変えてみる -->
    <style type="text/css">
    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: #00a65a !important;
        border-color: #00a65a !important;
    }
    .daterangepicker .ranges li.active,
    .daterangepicker .ranges li:hover {
       background: #00a65a !important;
       border: 1px solid #00a65a !important;
    }
    </style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>                                                                                                                            
    <![endif]-->
  </head>
  <body>
    <input type="text" id="date" value="">
    <script>
      $(function(){
        moment.locale("ja");
        $('#date').daterangepicker(
          {
            ranges: {
              '今日': [moment(), moment()],
              '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              '過去7日間': [moment().subtract(6, 'days'), moment()],
              '過去30日間': [moment().subtract(29, 'days'), moment()],
              '今月': [moment().startOf('month'), moment().endOf('month')],
              '先月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),
            format: "YYYY-MM-DD",
            locale: { applyLabel: "OK", customRangeLabel: "カスタム"}
          },
          function (start, end) {
            console.log(start);
            $('#date').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
          }
        );
      });
    </script>
  </body>
</html>

ちなみにdatepicker単体でも使えるみたいで以下のページにやり方がのっていました
AdminLTEのdaterangepickerをDatePickerまたはDatetimePickerとして使いたい - Qiita

以上です