Q&A
前提・実現したいこと
前までちゃんと
日付{!! Form::text('date', '', ['class' => 'input-sm form-control']) !!}
の場所をクリックすればカレンダーが出て
そこから日付を指定できてたのですが色々いじった後に試してみたら
それができなくなっていました。
検証でエラーメッセージも読みましたが解決法が見つかりません。
よろしくお願いします。
発生している問題・エラーメッセージ
jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
該当のソースコード
laravel
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta http-equiv="Pragma" content="no-cache"> 8 <meta http-equiv="Cache-Control" content="no-cache"> 9 <meta http-equiv="Expires" content="0"> 10 <title>Dashboard</title> 11 <link rel="stylesheet" type="text/css" href="css/sales_data.css"> 12 13 <!-- これでレスポンシブにしてます --> 14 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 15 16 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 17 18 <!-- jQuery本体--> 19 <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 21 22 <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" language="javascript"></script> 23 <!-- jQuery UI --> 24 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.4/jquery-ui.min.js"></script> 25 <!-- Datepicker日本語化 --> 26 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> 27 <!-- jQuery UI のCSS --> 28 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.4/themes/smoothness/jquery-ui.css"> 29 30 <!-- データピッカー --> 31 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 32 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css"> 33 34 <link rel="stylesheet" type="text/css" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css"> 35 <!-- bootstrap --> 36 <script src="../common/js/bootstrap.js"></script> 37 <link rel="stylesheet" href="../common/css/bootstrap.css"> 38 <!-- font-awesome --> 39 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 40 41 </head> 42 43 <body> 44 45 46 <div class="container"> 47 48 <!-- 指定集計部分 --> 49 <div class="form-group col-lg-12" id="datepicker-daterange"> 50 51 <div class="datepick col-lg-2 col-lg-offset-2"> 52 <label class="control-label">日付指定集計</label> 53 {!! Form::open(['route' => 'sales_data.show', 'autocomplete' => 'off']) !!} 54 集計ベース<br> 55 {!! Form::text('date_flg', 1, ['class' => 'hidden']) !!} 56 <div class="input-daterange input-group" id="datepicker"> 57 日付{!! Form::text('date', '', ['class' => 'input-sm form-control']) !!} 58 </div> 59 {{ csrf_field() }} 60 {!! Form::submit('集計', ['class' => 'btn btn-primary btn-block']) !!} 61 {!! Form::close() !!} 62 </div> 63 64 </div> 65 66 <!-- js --> 67 <script type="text/javascript" src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 68 <script type="text/javascript" src="bootstrap-datepicker/locales/bootstrap-datepicker.ja.min.js"></script> 69 70 <script> 71 $(function(){ 72 $('#datepicker-daterange .input-daterange').datepicker({ 73 language: 'ja', 74 format: "yyyy-mm-dd", 75 autoclose: true, 76 endDate: Date() 77 }); 78 }); 79 </script> 80 81 </div> 82 </body> 83</html> 84
回答1件
0
ベストアンサー
jQuery本体がバッティングしまくっているように思いますが問題ないのでしょうか。
通常は1つだけ（またはブラウザとかで分岐させて複数サーバーに置くけど読み込ませるのは1つだけ）のはずです。
bootstrapの本体CSSもバッティングしているように見えます。
あと気になるところとしてはbootstrap本体よりも後にjquery本体を読み込ませているところでしょうか。
投稿2019/01/17 01:59
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/17 02:08
2019/01/17 02:10
2019/01/17 02:18