bootstrap datepickerで土日の色を変えるよ！

気がついたら、また前回更新から一ヶ月の時が過ぎてしまっていました…
この一ヶ月間は転職したり引っ越ししたりとかなりバタバターっとしていて割と人生的に変換期に入ってきている感があります…！

今回はbootstrap datepickerについて書いていきたいと思いますー！
ちょっと開発をしていてカレンダーから日付入力したいなーと考えた時にお手軽に実装できると噂のbootstrap datepickerを導入しました。
それで土日だけ色を違う色にしたいなーと思ったりして色々調べたものの日本語記事であまり情報がなかったので今回の題材にしようかなーと思いました。

(今回もRails開発の中での導入なのでGemを使って導入していたりしますがご愛嬌ということで…）

bootstrap datepickerを導入するよ！

１. Gemfileに追記

gem 'bootstrap-datepicker-rails'

２. bundle install
３. application.jsに追記

//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.ja.js

とりあえず言語は日本語だけで良いのこんな感じ

４. application.cssに追記

 *= require_self
 *= require bootstrap-datepicker3
 *= require_tree .

これで一通り準備は完了！

bootstrap datepicker使ってみるよ！

javascript

$(document).ready(function(){
  $('.datepicker').datepicker();
});

HTML

<div class="input-group">
    <!-- erbの書き方なので注意 -->
    <%= f.text_field :input_date, class: "form-control datepicker" %>
</div>

とりあえずちょいちょいっとこんな感じで書くと下のような感じになります！

とはいえかなり質素感が半端ないですね…
せめて土日だけでもわかりやすくなってほしい…

土日に色をつけるよ！

ということで土日に色をつけましょう！
まずはjavascriptを改良

javascript

$(document).ready(function(){
  $('.datepicker').datepicker({
    beforeShowDay: function(date) {
      var myDate = new Object();
      if (date.getDay() == 0) {
        myDate.enabled = true;
        myDate.classes = 'class-sunday';
        myDate.tooltip  = '日曜日';
      } else if　(date.getDay() == 6) {
        myDate.enabled = true;
        myDate.classes = 'class-saturday';
        myDate.tooltip  = '土曜日';
      } else {
        myDate.enabled = true;
        myDate.classes = 'class-weekday';
        myDate.tooltip  = '平日';
      }
      return myDate;
    }
  });
});

beforeShowDayを設定することで日付表示の前に処理を行ってくれる。
ここの感じだとobjectにenabled, classes, tooltipを設定できるとのこと。
今回大事なのはclassesです！
これを使うことで色を変えたい曜日を判別します。

まずカレンダーに表示される日にちは1日単位でtd要素と成っているということを念頭に置いておいてください。
一日ごとにbeforeShowDayをみて処理を行います。
そこでif (date.getDay() == 0)みたいな感じで日にちと謎の数字を判定しています！ この謎の数字は日〜土を表していて0〜6で表現されます。 なので0だったら日曜日の処理、6だったら土曜日の処理、それ以外は平日の処理をやってね！ということになります。

で次に設定する内容についてです。
enableとtooltipは本質じゃないので割愛で…
大事なのはclassesでこれに設定した値は一日単位で生成されるtd要素のclassとして追加されます。

そしてclassが追記されることでスタイルを当てることができるようになります！

.class-sunday {
  color: red !important;
}
.class-saturday {
  color: blue !important;
}

これをcssで記入してやることで

こんな感じで土日に色がつきちょっとおしゃれな感じになりました！

おまけ

入力フォームをちょっとおしゃれにする

<div class="input-group">
  <%= f.text_field :input_date, id: "date-area", class: "form-control datepicker" %>
  <label for="date-area" class="input-group-btn">
    <span class="btn btn-success"><i class="fa fa-calendar"></i></span>
  </label>
</div>

bootstrapと合わせることでちょっとおしゃれなdatepickerの入力フォームができてしまいます！
bootstrap datepickerというだけありbootstrapとの親和性は高いですね！

さて今回はbootstrap datepickerについて書きました。
探してた時は藁にもすがる思いでしたがわかってみると意外となんてことないコードでした。
こういう微妙にハメられる系を見つけ次第どんどん記事にしていこうと思います（また次は一ヶ月後かなあ…笑）