teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問エラー　Uncaught TypeError: $(...).datepicker is not a functionの解決方法

編集履歴

質問編集履歴

2

ごじ

2020/07/30 23:31

投稿

Mario_11
Mario_11

スコア95

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,14 @@
9
9
  単体で下記のコードを実行すると成功し、フォームにカレンダーが表示されるのですが、
10
10
 
11
11
  ```html
12
+
13
+ <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
14
+
15
+ <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
16
+
17
+ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
18
+
19
+
12
20
 
13
21
  <script>
14
22
 
@@ -31,6 +39,12 @@
31
39
  djangoのformなどと一緒に表示させるとタイトルのエラーが出てしまい、カレンダーが表示されません。
32
40
 
33
41
  ```html
42
+
43
+ <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
44
+
45
+ <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
46
+
47
+ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
34
48
 
35
49
  <form action="" method="POST" enctype="multipart/form-data" class="h-adr">
36
50
 

1

改善

2020/07/30 23:31

投稿

Mario_11
Mario_11

スコア95

test CHANGED
@@ -1 +1 @@
1
- エラー　datepicker-widget.js:3 の解決方法
1
+ エラー　Uncaught TypeError: $(...).datepicker is not a functionの解決方法
test CHANGED
@@ -1,55 +1,87 @@
1
+ エラーの解決方法がわかりません。
2
+
3
+ `Uncaught TypeError: $(...).datepicker is not a function`
4
+
1
- [こちらのサイト](https://qiita.com/okoppe8/items/999b8e3c86708fbb3926)を参考にカレンダーフォームを作成しています。
5
+ [公式サイト](https://jqueryui.com/datepicker/)
2
6
 
3
7
 
4
8
 
5
- ですが、カレンダーの表示ができなかったのでChromeで検証を行うと、下記の様なエラーが出ており調べても解決方法がわからず質問させていただきました。
6
-
7
-
8
-
9
- ```error
10
-
11
- Uncaught TypeError: Cannot read property 'Constructor' of undefined
12
-
13
- Cannot read property 'Constructor' of undefined
14
-
15
- at HTMLDocument.<anonymous> (datepicker-widget.js:3)
16
-
17
- at j (VM205 jquery.min.js:2)
18
-
19
- at Object.fireWith [as resolveWith] (VM205 jquery.min.js:2)
20
-
21
- at Function.ready (VM205 jquery.min.js:2)
9
+ 単体で下記のコードを実行すると成功し、フォームにカレンダーが表示されるのですが、
22
-
23
- at HTMLDocument.J (VM205 jquery.min.js:2)
24
-
25
- (anonymous) @ datepicker-widget.js:3
26
-
27
- j @ VM205 jquery.min.js:2
28
-
29
- fireWith @ VM205 jquery.min.js:2
30
-
31
- ready @ VM205 jquery.min.js:2
32
-
33
- J @ VM205 jquery.min.js:2
34
-
35
- ```
36
-
37
- 記事自体一年以上前のものなので情報が古いと思い`jquery`などを最新バージョン(3.4.1)にして試したのですが同じエラーが表示されます。
38
-
39
-
40
10
 
41
11
  ```html
42
12
 
43
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
13
+ <script>
44
14
 
45
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
15
+ $( function() {
46
16
 
17
+ $( "#datepicker" ).datepicker();
18
+
19
+ } );
20
+
21
+ </script>
22
+
47
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
23
+ <p>Date: <input type="text" id="datepicker"></p>
48
24
 
49
25
 
50
26
 
51
27
  ```
52
28
 
53
- 何かアドバイスいただきたいです。
54
29
 
30
+
31
+ djangoのformなどと一緒に表示させるとタイトルのエラーが出てしまい、カレンダーが表示されません。
32
+
33
+ ```html
34
+
35
+ <form action="" method="POST" enctype="multipart/form-data" class="h-adr">
36
+
37
+ {% csrf_token %}
38
+
39
+ {{ form.media }}
40
+
41
+ <h2>店舗情報</h2>
42
+
43
+ <div class="row">
44
+
45
+ <div class="item-zip_code col-sm-5">
46
+
47
+ <div class="item-title">
48
+
49
+ {{ form.title | as_crispy_field }}
50
+
51
+ {{ form.title.error }}
52
+
53
+ </div>
54
+
55
+ <div class="item-category">
56
+
57
+ {{ form.category | as_crispy_field }}
58
+
59
+ {{ form.category.error }}
60
+
61
+ </div>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ </form>
68
+
69
+ <script>
70
+
71
+ $( function() {
72
+
73
+ $( "#datepicker" ).datepicker();
74
+
75
+ } );
76
+
77
+ </script>
78
+
79
+ <p>Date: <input type="text" id="datepicker"></p>
80
+
81
+
82
+
83
+ error: Uncaught TypeError: $(...).datepicker is not a function
84
+
85
+ ```
86
+
55
- よろしくお願いいたします。
87
+ 何かアドバイスをいただきたいです。