bootstrap-datepickerで複数月を表示したい

お世話になります。

前提・実現したいこと

Laravel(5.6)内蔵のbootstrapを使ってカレンダー表記をしています。
その際、今の月と前後月を表示させるにはどうしたらいいのでしょうか。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーは出ていません。
カレンダー自体は表示できています。

該当のソースコード

lang
1<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
2
3  <script>
4    $('.date-picker').datepicker({
5      showOtherMonths:true,//問題の部分
6      numberOfMonths:3//問題の部分
7    });
8  </script>

試したこと

「bootstrap datepicker 複数月」と検索

      showOtherMonths:true,
      numberOfMonths:3

と入力すると複数月表示できるとサイトでは書いてありました。
しかし、入力しても表示できませんでした。
Laravelのviewで記述されているscriptを開いてみます。
該当ソースコードの最初のscriptの部分です。
「showOtherMonths」をctrl + F で検索。
該当の文字はありませんでした。
「showOtherMonths」は有効ではないと判断しました

補足情報（FW/ツールのバージョンなど）

使用しているもの
・Laravel ver5.6
・bootstrap-datepicker

どのようにしたら前後月を表示できるのか、ご教示いただけますでしょうか。

###追記
ご回答して頂いたお二方、ありがとうございました。
勉強不足、調べ不足を痛感致しました。
やはり根本的なLaravelの理解が足りないと感じました。
（どこにCSSがある、どこにBootstrapがあって、このviewはどのCSSが適応されているなど。）

お二方にはどちらもベストアンサーを送りたいところでございますが
・Laravelの理解
・使っているBootstrap-datepickerでは複数月表示できないこと
・参考にしているドキュメントがあっていたこと
こちらをご指摘頂いたmts10806さんにベストアンサーにしました。

ご回答頂きまして、ありがとうございました。

行動規範の内容に同意します

回答2件

Laravelにはあまり関係ないコードですね。
サンプルコードを提示してみます。
これをviewにペタッと貼ると3ヵ月分が表示される位にはなります。
でも、これを改造するのは初心者には難しいかも？です。

mts10806さんが言う通り、簡単な方で実装するのもアリですよ。

html
1<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
2<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet">
3
4<div class='calendar'></div>
5<div class='calendar'></div>
6<div class='calendar'></div>
7
8<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
10
11<script>
12  $('.calendar').map(function(index) {
13    $(this).datepicker({
14      defaultViewDate: {
15        year: (new Date()).getFullYear(),
16        month: (new Date()).getMonth() + index,
17        date: 1
18      }
19    });
20  });
21
22  // keep month in sync
23  var orderMonth = function(e) {
24    var target = e.target;
25    var date = e.date;
26    var calendars = $('.calendar');
27    var positionOfTarget = calendars.index(target);
28    calendars.each(function(index) {
29      if (this === target) {
30        return;
31      }
32      var newDate = new Date(date);
33      newDate.setUTCDate(1);
34      newDate.setMonth(
35        date.getMonth() + index - positionOfTarget
36      );
37      
38      $(this).datepicker('_setDate', newDate, 'view');
39    });
40  };
41  $('.calendar').on('changeMonth', orderMonth);
42
43  // keep dates in sync
44  $('.calendar').on('changeDate', function(e) {
45    var calendars = $('.calendar');
46    var target = e.target;
47    var newDate = $(target).datepicker('getUTCDate');
48    var setDateCalled = false;
49    calendars.each(function() {
50      if (this === e.target) {
51        return;
52      }
53      
54      // check if dates are different to get out of loop
55      // setUTCDates triggers changeDate event...
56      var currentDate = $(this).datepicker('getUTCDate');
57      if (
58        currentDate &&
59        newDate.toISOString() === currentDate.toISOString()
60      ) {
61        return;
62      }
63      
64      $(this).datepicker('setUTCDate', newDate);
65      setDateCalled = true;
66    });
67    
68    // setUTCDate changes viewDate; have to get this in order again
69    if (setDateCalled) {
70      orderMonth(e);
71    }
72  });
73</script>

投稿2018/05/29 04:31

motuo

総合スコア3027

tukimi

2018/05/29 05:27

ソースを書いて頂き、ありがとうございます。書いて頂いた通りのソースコードで無事表示が出来ました。しかし、理解せずにそのままコピペは申し訳ないので現状はjQuery UI DatePickerに切り替えて対応したいと思います。 motuoさんの書いて頂いたコードを理解出来るように勉学に励みたいと思います。 jQuery UI に切り替える以外のやり方があったと教えていただいたこと、そして沢山のコードを書いて頂いたこと、感謝いたします。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

・参考にしたドキュメントがあっているかどうか

合ってます。

・複数月を表示させるオプションがあるかどうか
・無い場合はコードをどのように書くか

提示のリファレンスをざっと確認した感じ、ないように見受けられます(ざっと見た感じなので見落としているかもしれません)。
リファレンスにないものはデフォルトでは実装することはできませんので
自身でカスタマイズするか、
提示コードにあるnumberOfMonthsの指定ができるjQuery UI DatePickerに切り替えるか　ではないでしょうか。

ディレクトリ構造もいまいちよく分かっておらず、勉強中の身です。

その為、CSSがどこにあるのか、bootstrapがどこのディレクトリにあって、

作動させているのかも分かっておりません。

現在作業しているビューのコードをコピペしても、カレンダーは表示されず、文字化けのような変な表示になってしまうので一部分だけ抜粋しました。

調べましょう。
Laravelであれば日本語ドキュメントも充実しています。
「どこでBootStrap読み込んでるの」→分からないから放置
「エラーがでた」→分からないから放置
「文字化けだ」→分からないから放置
では身につきません。
エラーや文字化け・想定通りにいっていないのは何かしらお作法に則っていないからです。
それがPHP自体なのかLaravelなのか、はたまたHTMLなのかJavaScriptなのかCSSなのかは
調べないと分かりません。