teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQuery UI「datepicker 」の呼び出し時にJavaScriptのonselect オプションを使う方法

編集履歴

質問編集履歴

2

コード全体の内容を変更しました。 onSelect: の位置を$("#datepicker").datepicker({以下に変更しました。

2021/07/27 07:00

投稿

emi_ono
emi_ono

スコア84

test CHANGED
File without changes
test CHANGED
@@ -86,55 +86,53 @@
86
86
 
87
87
  <b>予約フォーム</b><br>
88
88
 
89
- <form method="POST" aciton="">
89
+ <form method="POST" action="">
90
-
90
+
91
- 1.お名前※必須<br>
91
+ 1.お名前(必須)<br>
92
-
92
+
93
- <input class="form1" type="text" name="username" placeholder="お名前"><br><br>
93
+ <input class="form1" type="text" name="username" placeholder="　お名前"/><br><br>
94
-
94
+
95
- 2.メールアドレス※必須<br>
95
+ 2.メールアドレス(必須)<br>
96
-
96
+
97
- <input class="form1" type="text" name="usermail" placeholder="〇〇@gmail.com"><br><br>
97
+ <input class="form1" type="text" name="username" placeholder="〇〇@gmail.com"/><br><br>
98
-
99
-
100
-
98
+
101
- 3.カレンダーから日付を選択してください<br>
99
+ 3.カレンダーから日付を選択してください<br>
102
-
100
+
103
- <input type="text" id="date_val" placeholder="2018年〇月〇日"><br>
101
+ <input type="text" id="date_val" placeholder="2018年〇月〇日"/><br>
104
-
102
+
105
- <div id="datepicker"></div><br>
103
+ <div id="datepicker"></div><br>
106
-
107
-
108
-
104
+
109
- 4.時間を選択してください<br>
105
+ 4.時間を選択してください<br>
110
106
 
111
107
  <select name="time">
112
108
 
113
109
  <option value=""> 選択してください</option>
114
110
 
115
- <option value="">9:00～10:00</option>
111
+ <option value="">9:00～</option>
116
-
112
+
117
- <option value="">10:00～11:00</option>
113
+ <option value="">10:00～</option>
118
-
114
+
119
- <option value="">11:00～12:00</option>
115
+ <option value="">11:00～</option>
120
-
116
+
121
- <option value="">13:00～14:00</option>
117
+ <option value="">13:00～</option>
122
-
118
+
123
- <option value="">14:00～15:00</option>
119
+ <option value="">14:00～</option>
124
-
120
+
125
- <option value="">15:00～16:00</option>
121
+ <option value="">15:00～</option>
126
-
122
+
127
- <option value="">16:00～17:00</option>
123
+ <option value="">16:00～</option>
128
-
124
+
129
- <option value="">17:00～18:00</option>
125
+ <option value="">17:00～</option>
130
126
 
131
127
  </select>
132
128
 
129
+
130
+
133
131
  <select name="time">
134
132
 
135
133
  <option value="">30分</option>
136
134
 
137
- <option value="" selected>60分</option>
135
+ <option value=""　selected>60分</option>
138
136
 
139
137
  <option value="">90分</option>
140
138
 
@@ -142,11 +140,11 @@
142
140
 
143
141
  </select>
144
142
 
145
-
143
+
146
144
 
147
145
  <br><br>
148
146
 
149
- 5.ご希望されるスタッフを選択してください<br>
147
+ 5.ご希望される弁護士を選択してください<br>
150
148
 
151
149
  <select name="lawyer">
152
150
 
@@ -164,12 +162,30 @@
164
162
 
165
163
  <input type="submit" value="予約する" class="submit">
166
164
 
167
- </form>
165
+ </form>
168
166
 
169
167
 
170
168
 
171
169
  <script>
172
170
 
171
+ //yyyymmdd形式で日付を取得
172
+
173
+ var dt = new Date();
174
+
175
+ var y = dt.getFullYear();
176
+
177
+ var m = ("00" + (dt.getMonth()+1)).slice(-2);
178
+
179
+ var d = ("00" + dt.getDate()).slice(-2);
180
+
181
+ var today = y + "年"+ m + "月" + d + "日";
182
+
183
+ console.log(today);
184
+
185
+
186
+
187
+
188
+
173
189
  $(function() {
174
190
 
175
191
  var dateFormat = 'yy年mm月dd日';
@@ -184,34 +200,58 @@
184
200
 
185
201
  onSelect: function(dateText, inst) {
186
202
 
203
+ $("#date_val").val(dateText);
204
+
205
+ if(today == dateText){
206
+
207
+ for(var i = 0; i < timelist.length; i++){
208
+
209
+ if(timelist[i] < time){
210
+
211
+ document.getElementById(timelist[i]).style.display = "none";
212
+
213
+ }
214
+
215
+ }
216
+
217
+ } else{
218
+
219
+ for(var i = 0; i < timelist.length; i++){
220
+
221
+ document.getElementById(timelist[i]).style.display = "";
222
+
223
+ }
224
+
225
+ }
226
+
227
+ }
228
+
229
+ });
230
+
231
+
232
+
233
+ //土日選択不可設定
234
+
235
+ $(function() {
236
+
237
+ var dateFormat = 'yy年mm月dd日';
238
+
239
+ $("#datepicker").datepicker({
240
+
241
+ lang:'ja',
242
+
243
+ dateFormat: dateFormat,
244
+
245
+ minDate: 0,
246
+
247
+ onSelect: function(dateText, inst) {
248
+
187
249
  $("#date_val").val(dateText);
188
250
 
189
251
  }
190
252
 
191
253
  });
192
254
 
193
- //土日選択不可設定
194
-
195
- $(function() {
196
-
197
- var dateFormat = 'yy年mm月dd日';
198
-
199
- $("#datepicker").datepicker({
200
-
201
- lang:'ja',
202
-
203
- dateFormat: dateFormat,
204
-
205
- minDate: 0,
206
-
207
- onSelect: function(dateText, inst) {
208
-
209
- $("#date_val").val(dateText);
210
-
211
- }
212
-
213
- });
214
-
215
255
  $( "#datepicker" ).datepicker('option','beforeShowDay',function(date){
216
256
 
217
257
  var ret = [(date.getDay() != 0 && date.getDay() != 6)];
@@ -222,57 +262,11 @@
222
262
 
223
263
  });
224
264
 
225
- //yyyymmdd形式で日付を取得
265
+
226
-
227
- var dt = new Date();
266
+
228
-
229
- var y = dt.getFullYear();
230
-
231
- var m = ("00" + (dt.getMonth()+1)).slice(-2);
232
-
233
- var d = ("00" + dt.getDate()).slice(-2);
234
-
235
- var today = y + "年"+ m + "月" + d + "日";
236
-
237
- console.log(today);
238
-
239
- });
267
+ });
240
-
241
-
242
-
243
-
244
-
245
- //予約日(datepicker)が今日の場合は、現在時刻以降のselectを表示
268
+
246
-
247
- onSelect: function(dateText, inst) {
269
+
248
-
249
- $("#date_val").val(dateText);
250
-
251
- if(today == dateText){
252
-
253
- for(var i = 0; i < timelist.length; i++){
254
-
255
- if(timelist[i] < time){
256
-
257
- document.getElementById(timelist[i]).style.display = "none";
258
-
259
- }
260
-
261
- }
262
-
263
- } else{
264
-
265
- for(var i = 0; i < timelist.length; i++){
266
-
267
- document.getElementById(timelist[i]).style.display = "";
268
-
269
- }
270
-
271
- }
272
-
273
- }
274
-
275
-
276
270
 
277
271
  </script>
278
272
 

1

タイトルを変更しました

2021/07/27 07:00

投稿

emi_ono
emi_ono

スコア84

test CHANGED
@@ -1 +1 @@
1
- 予約日(datepicker)が今日の場合は、現在時刻以降のselectを表示したい
1
+ jQuery UI「datepicker 」の呼び出し時にJavaScriptのonselect オプションを使う方法
test CHANGED
File without changes