質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

1718閲覧

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

tukimi

総合スコア14

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/05/29 02:42

編集2018/05/29 05:43

お世話になります。

前提・実現したいこと

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さんにベストアンサーにしました。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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 に切り替える以外のやり方があったと教えていただいたこと、そして沢山のコードを書いて頂いたこと、感謝いたします。 ありがとうございました。
guest

0

ベストアンサー

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

合ってます。

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

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

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

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

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

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

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

投稿2018/05/29 04:16

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tukimi

2018/05/29 05:07

ご回答ありがとうございます。 いま一度、Laravelのドキュメントを見直して ディレクトリ構造が把握できるようにします。 そしてjQuery UI DatePickerのやり方も試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問