bootstrap-datepickerを使って年月のみ取得する

jQueryのみを使っていた頃は、jQueryのDatePickerを改造したympickerを使っていたのですが、Bootstrap3を導入したらcssがうまく適用されなかったので、bootstrap-datepickerで同じようなことができないか調べてみました。

実はbootstrap-datepickerにはモードがある

ソースコードを読んでいけばわかるのですが、bootstrap-datepickerの設定時のオプションに、minValueModeというのがあります。

bootstrap-datepicker.jsの175行目あたり

switch (o.minViewMode){
    case 1:
    case 'months':
        o.minViewMode = 1;
        break;
    case 2:
    case 'years':
        o.minViewMode = 2;
        break;
    default:
        o.minViewMode = 0;
}

これを設定してみましょう。

使ってみる

idがyear_month_start, year_month_endの要素がある場合、年月のみのdatepickerを設定してみます。

coffeescript

if $('#year_month_start, #year_month_end').is '*'
  $('#year_month_start, #year_month_end').datepicker(
    format: 'yyyy/mm'
    language: 'ja'
    autoclose: true,
    minViewMode: 'months'
  )

すると、年月のみの表示がされました！

bootstrap-datepickerは便利ですなぁ。