質問編集履歴

3

コードを一部修正しておきました。

2017/09/26 01:44

投稿

Leon-Lionking
Leon-Lionking

スコア37

test CHANGED
File without changes
test CHANGED
@@ -66,62 +66,60 @@
66
66
 
67
67
  //ラジオボタンが選択されない場合
68
68
 
69
- var vs=$('input:radio[name="ご希望店舗名"]:checked').val();
69
+ var radio=$('input:radio[name="ご希望店舗名"]:checked').val();
70
-
70
+
71
- if(vs == null){
71
+ if(radio == null){
72
-
72
+
73
- $('input[name="第1希望日"]').val('店を選択してください');
73
+ $('input[name="第1希望日"]').val('店を選択してください');
74
-
74
+
75
- $('input[name="第1希望"]').val('店を選択してください');
75
+ $('input[name="第2希望"]').val('店を選択してください');
76
76
 
77
77
  }
78
78
 
79
- else(vs == null){
79
+
80
-
81
- $('input[name="第2希望日"]').val('店を選択してください');
80
+
82
-
83
- $('input[name="第2希望時"]').val('店を選択してください');
84
-
85
- }
86
-
87
- $( 'input[name="ご希望店舗名' ).change( function() {
81
+ $( 'input[name="ご希望店舗名"]:radio' ).change( function() {
88
-
89
-
90
-
82
+
91
- // 店舗 A
83
+ // Shop A
92
84
 
93
85
  if($( this ).attr('id') == 'shop_a'){
94
86
 
95
-
87
+ // 第1希望日時
96
88
 
97
89
  $('input[name="第1希望日"]').val('');
98
90
 
99
91
  $('select[name="第1希望時"]').val('');
100
92
 
93
+ $('input[name="第1希望日"]').attr("id","");
94
+
95
+ $('input[name="第1希望日"]').attr("class","");
96
+
101
- $("input[name='第1希望日']").remove();
97
+ $('input[name="第1希望日"]').addClass("datepicker");
102
-
103
- var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
98
+
104
-
105
- $('select[name="第1希望"').before($d01);
99
+ $('input[name="第1希望"]').attr('readonly',true);
100
+
101
+
102
+
106
-
103
+ // 第2希望日時
107
-
108
104
 
109
105
  $('input[name="第2希望日"]').val('');
110
106
 
111
107
  $('select[name="第2希望時"]').val('');
112
108
 
109
+ $('input[name="第2希望日"]').attr("id","");
110
+
111
+ $('input[name="第2希望日"]').attr("class","");
112
+
113
- $("input[name='第2希望日']").remove();
113
+ $('input[name="第2希望日"]').addClass("datepicker");
114
-
115
- var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
114
+
116
-
117
- $('select[name="第2希望"').before($d02);
115
+ $('input[name="第2希望"]').attr('readonly',true);
116
+
117
+
118
+
118
-
119
+ // カレンダー入力項目
119
-
120
120
 
121
121
  $('.datepicker').datepicker({
122
122
 
123
- dayNames: ['日', '月', '火', '水', '木', '金', '土'],
124
-
125
123
  minDate: 0,
126
124
 
127
125
  beforeShowDay: function(day) {
@@ -130,13 +128,13 @@
130
128
 
131
129
  var hName = ktHolidayName(dd);
132
130
 
133
- // 休日設定
131
+ // 休日・営業設定
134
-
132
+
135
- if ( day.getDay() == 0 ) return [false,'','休日'];
133
+ if ( day.getDay() == 1 ) return [false,'','休日'];
136
-
134
+
137
- // 時間設定
135
+ if ( day.getDay() == 3 ) return [false,'','休診日'];
138
-
136
+
139
- if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:30?18:30'];
137
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:00?18:00'];
140
138
 
141
139
  return [true,'','11:00?20:00'];
142
140
 
@@ -144,6 +142,8 @@
144
142
 
145
143
 
146
144
 
145
+ // 時間設定
146
+
147
147
  onSelect: function(dateText, obj) {
148
148
 
149
149
  var date1 = $(this).datepicker( 'getDate' ) || new Date();
@@ -162,11 +162,111 @@
162
162
 
163
163
  dateText+='<option value="">時間帯を選択</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option><option value="17:30">17:30</option><option value="18:00">18:00</option><option value="18:30">18:30</option><option value="19:00">19:00</option>';
164
164
 
165
+ }if($(this).attr('name') == '第1希望日'){
166
+
167
+ $('select[name="第1希望時"] option').remove();
168
+
169
+ $('select[name="第1希望時"]').append(dateText);
170
+
171
+ }if($(this).attr('name') == '第2希望日'){
172
+
173
+ $('select[name="第2希望時"] option').remove();
174
+
175
+ $('select[name="第2希望時"]').append(dateText);
176
+
165
177
  }
166
178
 
167
-
179
+ }
180
+
168
-
181
+ });
182
+
183
+
184
+
185
+ // Shop B
186
+
187
+ } else if($(this).is('#shop_b')){
188
+
189
+ // 第1希望日時
190
+
191
+ $('input[name="第1希望日"]').val('');
192
+
193
+ $('select[name="第1希望時"]').val('');
194
+
195
+ $('input[name="第1希望日"]').attr("id","");
196
+
197
+ $('input[name="第1希望日"]').attr("class","");
198
+
199
+ $('input[name="第1希望日"]').addClass("datepicker");
200
+
201
+ $('input[name="第1希望日"]').attr('readonly',true);
202
+
203
+
204
+
205
+ // 第2希望日時
206
+
207
+ $('input[name="第2希望日"]').val('');
208
+
209
+ $('select[name="第2希望時"]').val('');
210
+
211
+ $('input[name="第2希望日"]').attr("id","");
212
+
213
+ $('input[name="第2希望日"]').attr("class","");
214
+
215
+ $('input[name="第2希望日"]').addClass("datepicker");
216
+
217
+ $('input[name="第2希望日"]').attr('readonly',true);
218
+
219
+
220
+
221
+ // カレンダー入力項目
222
+
223
+ $('.datepicker').datepicker({
224
+
225
+ minDate: 0,
226
+
227
+ beforeShowDay: function(day) {
228
+
229
+ var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate();
230
+
231
+ var hName = ktHolidayName(dd);
232
+
233
+ // 休日・営業設定
234
+
235
+ if ( day.getDay() == 0 ) return [false,'','休診日'];
236
+
237
+ if ( day.getDay() == 1 ) return [false,'','休診日'];
238
+
239
+ if ( day.getDay() == 2 ) return [false,'','休診日'];
240
+
241
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:00?20:00'];
242
+
243
+ return [true,'','10:00?15:00'];
244
+
245
+ },
246
+
247
+
248
+
249
+ // 時間設定
250
+
251
+ onSelect: function(dateText, obj) {
252
+
253
+ var date1 = $(this).datepicker( 'getDate' ) || new Date();
254
+
255
+ var the_day=date1.getDay();
256
+
257
+ var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
258
+
259
+ var hName = ktHolidayName(dd);
260
+
261
+ if(the_day == 0 || hName != ""){
262
+
263
+ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->';
264
+
265
+ }else{
266
+
267
+ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->';
268
+
169
- if($(this).attr('name') == '第1希望日'){
269
+ }if($(this).attr('name') == '第1希望日'){
170
270
 
171
271
  $('select[name="第1希望時"] option').remove();
172
272
 
@@ -186,40 +286,46 @@
186
286
 
187
287
 
188
288
 
189
- // 店舗 B
289
+ // Shop C
190
-
290
+
191
- }else if($( this ).attr('id') == 'shop_b'){
291
+ } else if($(this).attr('id') == 'shop_c'){
292
+
192
-
293
+ // 第1希望日時
193
-
194
294
 
195
295
  $('input[name="第1希望日"]').val('');
196
296
 
197
297
  $('select[name="第1希望時"]').val('');
198
298
 
299
+ $('input[name="第1希望日"]').attr("id","");
300
+
301
+ $('input[name="第1希望日"]').attr("class","");
302
+
199
- $("input[name='第1希望日']").remove();
303
+ $('input[name="第1希望日"]').addClass("datepicker");
200
-
201
- var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
304
+
202
-
203
- $('select[name="第1希望"').before($d01);
305
+ $('input[name="第1希望"]').attr('readonly',true);
306
+
307
+
308
+
204
-
309
+ // 第2希望日時
205
-
206
310
 
207
311
  $('input[name="第2希望日"]').val('');
208
312
 
209
313
  $('select[name="第2希望時"]').val('');
210
314
 
315
+ $('input[name="第2希望日"]').attr("id","");
316
+
317
+ $('input[name="第2希望日"]').attr("class","");
318
+
211
- $("input[name='第2希望日']").remove();
319
+ $('input[name="第2希望日"]').addClass("datepicker");
212
-
213
- var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
320
+
214
-
215
- $('select[name="第2希望"').before($d02);
321
+ $('input[name="第2希望"]').attr('readonly',true);
322
+
323
+
324
+
216
-
325
+ // カレンダー入力項目
217
-
218
326
 
219
327
  $('.datepicker').datepicker({
220
328
 
221
- dayNames: ['日', '月', '火', '水', '木', '金', '土'],
222
-
223
329
  minDate: 0,
224
330
 
225
331
  beforeShowDay: function(day) {
@@ -228,29 +334,29 @@
228
334
 
229
335
  var hName = ktHolidayName(dd);
230
336
 
231
- // 休日設定
337
+ // 休日・営業設定
232
-
233
- if ( day.getDay() == 0 ) return [false,'','休日'];
338
+
234
-
235
- if ( day.getDay() == 1 ) return [false,'','休日'];
339
+ if ( day.getDay() == 1 ) return [false,'','休日'];
236
-
340
+
237
- if ( day.getDay() == 2 ) return [false,'','休日'];
341
+ if ( day.getDay() == 3 ) return [false,'','休日'];
238
-
342
+
239
- // 時間設定
343
+ if ( day.getDay() == 5 ) return [false,'','休診日'];
240
-
344
+
241
- if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','11:00?18:00'];
345
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','13:00?17:00'];
242
-
346
+
243
- return [true,'','11:00?18:00'];
347
+ return [true,'','12:00?18:00'];
244
348
 
245
349
  },
246
350
 
247
351
 
248
352
 
353
+ // 時間設定
354
+
249
355
  onSelect: function(dateText, obj) {
250
356
 
251
357
  var date1 = $(this).datepicker( 'getDate' ) || new Date();
252
358
 
253
- var the_day=date1.getDay();
359
+ var the_day = date1.getDay();
254
360
 
255
361
  var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
256
362
 
@@ -258,136 +364,38 @@
258
364
 
259
365
  if(the_day == 0 || hName != ""){
260
366
 
261
- // 時間帯を選択 文字数制限のため省略
367
+ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->';
262
368
 
263
369
  }else{
264
370
 
371
+ dateText+='<option value="">時間帯を選択</option><!-- 以下省略 -->';
372
+
265
- // 時間帯を選択 文字数制限のため省略
373
+ }if($(this).attr('name') == '第1希望日'){
374
+
375
+ $('select[name="第1希望時"] option').remove();
376
+
377
+ $('select[name="第1希望時"]').append(dateText);
378
+
379
+ }if($(this).attr('name') == '第2希望日'){
380
+
381
+ $('select[name="第2希望時"] option').remove();
382
+
383
+ $('select[name="第2希望時"]').append(dateText);
266
384
 
267
385
  }
268
386
 
269
- if($(this).attr('name') == '第1希望日'){
270
-
271
- $('select[name="第1希望時"] option').remove();
272
-
273
- $('select[name="第1希望時"]').append(dateText);
274
-
275
- }if($(this).attr('name') == '第2希望日'){
276
-
277
- $('select[name="第2希望時"] option').remove();
278
-
279
- $('select[name="第2希望時"]').append(dateText);
280
-
281
- }
282
-
283
387
  }
284
388
 
285
389
  });
286
390
 
287
-
288
-
289
- // 店舗 C
290
-
291
- } else {
292
-
293
- $('input[name="第1希望日"]').val('');
294
-
295
- $('select[name="第1希望時"]').val('');
296
-
297
- $("input[name='第1希望日']").remove();
298
-
299
- var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
300
-
301
- $('select[name="第1希望時"').before($d01);
302
-
303
-
304
-
305
- $('input[name="第2希望日"]').val('');
306
-
307
- $('select[name="第2希望時"]').val('');
308
-
309
- $("input[name='第2希望日']").remove();
310
-
311
- var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
312
-
313
- $('select[name="第2希望時"').before($d02);
314
-
315
-
316
-
317
- $('.datepicker').datepicker({
318
-
319
- dayNames: ['日', '月', '火', '水', '木', '金', '土'],
320
-
321
- minDate: 0,
322
-
323
- beforeShowDay: function(day) {
324
-
325
- var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate();
326
-
327
- var hName = ktHolidayName(dd);
328
-
329
- // 休日設定
330
-
331
- if ( day.getDay() == 0 ) return [false,'','休日'];
332
-
333
-
334
-
335
- // 時間設定
336
-
337
- if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:30?18:30'];
338
-
339
- return [true,'','11:00?20:00'];
340
-
341
- },
391
+ };
342
-
343
- onSelect: function(dateText, obj) {
392
+
344
-
345
- var date1 = $(this).datepicker( 'getDate' ) || new Date();
346
-
347
- var the_day=date1.getDay();
348
-
349
- var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
350
-
351
- var hName = ktHolidayName(dd);
352
-
353
- if(the_day == 0 || hName != ""){
354
-
355
- // 時間帯を選択 文字数制限のため省略
356
-
357
- }else{
358
-
359
- // 時間帯を選択 文字数制限のため省略
360
-
361
- }if($(this).attr('name') == '第1希望日'){
362
-
363
- $('select[name="第1希望時"] option').remove();
364
-
365
- $('select[name="第1希望時"]').append(dateText);
366
-
367
- }if($(this).attr('name') == '第2希望日'){
368
-
369
- $('select[name="第2希望時"] option').remove();
370
-
371
- $('select[name="第2希望時"]').append(dateText);
372
-
373
- }
374
-
375
- }
376
-
377
- });
393
+ });
378
-
379
- }
380
-
381
- });
382
394
 
383
395
  });
384
396
 
385
-
386
-
387
397
  ```
388
398
 
389
- ・カレンダー表示されず、時間も設定した通り、表示されません。
390
-
391
399
  ・祝日設定に外部から読み込んでいますが、祝日通りに、時間表示できません。
392
400
 
393
401
  ・店舗選択はできていますが、店舗ごとの時間が表示されず、難航中です。

2

ERRORの件について、表記させていただきました。

2017/09/26 01:44

投稿

Leon-Lionking
Leon-Lionking

スコア37

test CHANGED
File without changes
test CHANGED
@@ -70,13 +70,19 @@
70
70
 
71
71
  if(vs == null){
72
72
 
73
- $('input[name="第1希望日"]').val('医院を選択してください');
73
+ $('input[name="第1希望日"]').val('を選択してください');
74
-
74
+
75
- $('input[name="第1希望時"]').val('医院を選択してください');
75
+ $('input[name="第1希望時"]').val('を選択してください');
76
76
 
77
77
  }
78
78
 
79
-
79
+ else(vs == null){
80
+
81
+ $('input[name="第2希望日"]').val('店を選択してください');
82
+
83
+ $('input[name="第2希望時"]').val('店を選択してください');
84
+
85
+ }
80
86
 
81
87
  $( 'input[name="ご希望店舗名' ).change( function() {
82
88
 
@@ -380,4 +386,10 @@
380
386
 
381
387
  ```
382
388
 
389
+ ・カレンダー表示されず、時間も設定した通り、表示されません。
390
+
391
+ ・祝日設定に外部から読み込んでいますが、祝日通りに、時間表示できません。
392
+
393
+ ・店舗選択はできていますが、店舗ごとの時間が表示されず、難航中です。
394
+
383
395
  ご教授お願いします。

1

文章ミスですみませんでした。修正済。

2017/09/25 06:50

投稿

Leon-Lionking
Leon-Lionking

スコア37

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- [リンク内容](https://teratail.com/questions/85816)
1
+ [店舗ごとの休日別選択](https://teratail.com/questions/85816)
2
2
 
3
3
  上記の参考のもとに、バージョンアップのつもりで質問させてください。
4
4
 
@@ -18,33 +18,33 @@
18
18
 
19
19
  A店舗
20
20
 
21
- ・通常時間 月曜日~金曜日 10:00~20:00
21
+ ・通常時間 月曜日~金曜日 10:00~20:00
22
-
22
+
23
- ・土曜時間 10:00~15:00
23
+ ・土曜時間 10:00~15:00
24
-
24
+
25
- ・祝日時間 9:00~16:00
25
+ ・祝日時間 9:00~16:00
26
-
26
+
27
- ・休日 日曜日
27
+ ・休日 日曜日
28
28
 
29
29
  B店舗
30
30
 
31
- ・通常時間 水曜日~金曜日 10:00~20:00
31
+ ・通常時間 水曜日~金曜日 10:00~20:00
32
-
32
+
33
- ・土曜時間 10:00~15:00
33
+ ・土曜時間 10:00~15:00
34
-
34
+
35
- ・祝日時間 9:00~16:00
35
+ ・祝日時間 9:00~16:00
36
-
36
+
37
- ・休日 日曜日・月曜日・火曜日
37
+ ・休日 日曜日・月曜日・火曜日
38
38
 
39
39
  C店舗
40
40
 
41
- ・通常時間 月曜日・水曜日・金曜日 10:00~20:00
41
+ ・通常時間 月曜日・水曜日・金曜日 10:00~20:00
42
-
42
+
43
- ・通常時間 火曜日・木曜日 9:00~15:00
43
+ ・通常時間 火曜日・木曜日 9:00~15:00
44
-
44
+
45
- ・土曜時間 10:00~15:00
45
+ ・土曜時間 10:00~15:00
46
-
46
+
47
- ・休日 日曜日・祝日
47
+ ・休日 日曜日・祝日
48
48
 
49
49
 
50
50
 
@@ -52,406 +52,332 @@
52
52
 
53
53
 
54
54
 
55
+ ※holiday.js
56
+
57
+ [祝日設定(外部ホームページから参考)](http://www.h3.dion.ne.jp/~sakatsu/holiday_logic.htm#JS)
58
+
59
+
60
+
55
- HTML
61
+ カレンダー選択時間選択
56
62
 
57
63
  ```ここに言語を入力
58
64
 
59
- <form method="POST">
60
-
61
- <p>※お手数です、必須項目をすべてご入力の上、確認画面へお進みください。</p>
62
-
63
-
64
-
65
- <table class="mailform">
66
-
67
- <tr>
68
-
69
- <th>ご希望店舗</th>
70
-
71
- <td>
72
-
73
- <input type="hidden" name="ご希望店舗名" value="" />
74
-
75
- <ul class="list">
76
-
77
- <li><label><input type="radio" name="ご希望店舗名" value="店舗A" id="shop_a" /> 店舗A</label></li>
78
-
79
- <li><label><input type="radio" name="ご希望店舗名" value="店舗B" id="shop_b" /> 店舗B</label></li>
80
-
81
- <li><label><input type="radio" name="ご希望店舗名" value="店舗C" id="shop_c" /> 店舗C</label></li>
82
-
83
- </ul>
84
-
85
- </td>
86
-
87
- </tr>
88
-
89
-
90
-
91
- <tr>
92
-
93
- <th>お名前</th>
94
-
95
- <td><input id="user_name" type="text" name="お名前" size="40" />例:山田花子</td>
96
-
97
- </tr>
98
-
99
-
100
-
101
- <tr>
102
-
103
- <th>ふりがな</th>
104
-
105
- <td><input id="user_name_kana" type="text" name="ふりがな" size="40" />例:やまだはなこ</td>
106
-
107
- </tr>
108
-
109
-
110
-
111
- <tr>
112
-
113
- <th>お電話番号</th>
114
-
115
- <td><input type="text" name="お電話番号" size="26" />例:090-0000-0000</td>
116
-
117
- </tr>
118
-
119
-
120
-
121
- <tr>
122
-
123
- <th>メールアドレス</th>
124
-
125
- <td><input type="email" name="email" size="40" />例:info@google.com</td>
126
-
127
- </tr>
128
-
129
-
130
-
131
- <tr>
132
-
133
- <th>ご希望の連絡先</th>
134
-
135
- <td>
136
-
137
- <label><input type="radio" name="希望連絡先" value="お電話" /> お電話</label>
138
-
139
- <label><input type="radio" name="希望連絡先" value="メール" /> メール</label>
140
-
141
- </td>
142
-
143
- </tr>
144
-
145
-
146
-
147
- <tr>
148
-
149
- <th>第1希望日時</th>
150
-
151
- <td class="day">
152
-
153
- <input type="hidden" name="お客さまの第1希望日時" value="" />
154
-
155
- <input type="text" name="第1希望日" size="26" id="datepicker" placeholder="カレンダーから選択" />
156
-
157
- <select name="第1希望時">
158
-
159
- <option value="">時間帯を選択</option>
160
-
161
- <option value="12:00">12:00</option>
162
-
163
- <option value="12:30">12:30</option>
164
-
165
- <option value="13:00">13:00</option>
166
-
167
- <option value="13:30">13:30</option>
168
-
169
- <option value="14:00">14:00</option>
170
-
171
- <option value="14:30">14:30</option>
172
-
173
- <option value="15:00">15:00</option>
174
-
175
- <option value="15:30">15:30</option>
176
-
177
- <option value="16:00">16:00</option>
178
-
179
- <option value="16:30">16:30</option>
180
-
181
- <option value="17:00">17:00</option>
182
-
183
- <option value="17:30">17:30</option>
184
-
185
- <option value="18:00">18:00</option>
186
-
187
- <option value="18:30">18:30</option>
188
-
189
- </select>
190
-
191
- </td>
192
-
193
- </tr>
194
-
195
-
196
-
197
- <tr>
198
-
199
- <th>無料カウンセリング<br />第2希望日時</th>
200
-
201
- <td class="day">
202
-
203
- <input type="hidden" name="お客さまの第2希望時" value="" />
204
-
205
- <input type="text" name="第2希望日" size="26" id="datepicker02" placeholder="カレンダーから選択" />
206
-
207
- <select name="第2希望時">
208
-
209
- <option value="">時間帯を選択</option>
210
-
211
- <option value="12:00">12:00</option>
212
-
213
- <option value="12:30">12:30</option>
214
-
215
- <option value="13:00">13:00</option>
216
-
217
- <option value="13:30">13:30</option>
218
-
219
- <option value="14:00">14:00</option>
220
-
221
- <option value="14:30">14:30</option>
222
-
223
- <option value="15:00">15:00</option>
224
-
225
- <option value="15:30">15:30</option>
226
-
227
- <option value="16:00">16:00</option>
228
-
229
- <option value="16:30">16:30</option>
230
-
231
- <option value="17:00">17:00</option>
232
-
233
- <option value="17:30">17:30</option>
234
-
235
- <option value="18:00">18:00</option>
236
-
237
- <option value="18:30">18:30</option>
238
-
239
- </select>
240
-
241
- </td>
242
-
243
- </tr>
244
-
245
- <tr>
246
-
247
- <th>質問などありましたら、ご入力ください。</th>
248
-
249
- <td><textarea name="質問などありましら、ご入力ください。" rows="20" cols="60" class="mfp"></textarea></td>
250
-
251
- </tr>
252
-
253
-
254
-
255
- </table>
256
-
257
- <button type="submit">確認画面へ &gt;</button>
258
-
259
- </form>
65
+ jQuery(document).ready(function($){
66
+
67
+ //ラジオボタン選択れな場合
68
+
69
+ var vs=$('input:radio[name="ご希望店舗名"]:checked').val();
70
+
71
+ if(vs == null){
72
+
73
+ $('input[name="第1希望日"]').val('医院を選択してください');
74
+
75
+ $('input[name="第1希望時"]').val('医院を選択してください');
76
+
77
+ }
78
+
79
+
80
+
81
+ $( 'input[name="ご希望店舗名' ).change( function() {
82
+
83
+
84
+
85
+ // 店舗 A
86
+
87
+ if($( this ).attr('id') == 'shop_a'){
88
+
89
+
90
+
91
+ $('input[name="第1希望日"]').val('');
92
+
93
+ $('select[name="第1希望時"]').val('');
94
+
95
+ $("input[name='第1希望日']").remove();
96
+
97
+ var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
98
+
99
+ $('select[name="第1希望時"').before($d01);
100
+
101
+
102
+
103
+ $('input[name="第2希望日"]').val('');
104
+
105
+ $('select[name="第2希望時"]').val('');
106
+
107
+ $("input[name='第2希望日']").remove();
108
+
109
+ var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
110
+
111
+ $('select[name="第2希望時"').before($d02);
112
+
113
+
114
+
115
+ $('.datepicker').datepicker({
116
+
117
+ dayNames: ['日', '月', '火', '水', '木', '金', '土'],
118
+
119
+ minDate: 0,
120
+
121
+ beforeShowDay: function(day) {
122
+
123
+ var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate();
124
+
125
+ var hName = ktHolidayName(dd);
126
+
127
+ // 休日設定
128
+
129
+ if ( day.getDay() == 0 ) return [false,'','休日'];
130
+
131
+ // 時間設定
132
+
133
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:30?18:30'];
134
+
135
+ return [true,'','11:00?20:00'];
136
+
137
+ },
138
+
139
+
140
+
141
+ onSelect: function(dateText, obj) {
142
+
143
+ var date1 = $(this).datepicker( 'getDate' ) || new Date();
144
+
145
+ var the_day=date1.getDay();
146
+
147
+ var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
148
+
149
+ var hName = ktHolidayName(dd);
150
+
151
+ if(the_day == 0 || hName != ""){
152
+
153
+ dateText+='<option value="">時間帯を選択</option><option value="10:00">10:00</option><option value="10:30">10:30</option><option value="11:00">11:00</option><option value="11:30">11:30</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option>';
154
+
155
+ }else{
156
+
157
+ dateText+='<option value="">時間帯を選択</option><option value="12:00">12:00</option><option value="12:30">12:30</option><option value="13:00">13:00</option><option value="13:30">13:30</option><option value="14:00">14:00</option><option value="14:30">14:30</option><option value="15:00">15:00</option><option value="15:30">15:30</option><option value="16:00">16:00</option><option value="16:30">16:30</option><option value="17:00">17:00</option><option value="17:30">17:30</option><option value="18:00">18:00</option><option value="18:30">18:30</option><option value="19:00">19:00</option>';
158
+
159
+ }
160
+
161
+
162
+
163
+ if($(this).attr('name') == '第1希望日'){
164
+
165
+ $('select[name="第1希望時"] option').remove();
166
+
167
+ $('select[name="1希望時"]').append(dateText);
168
+
169
+ }if($(this).attr('name') == '第2希望日'){
170
+
171
+ $('select[name="第2希望時"] option').remove();
172
+
173
+ $('select[name="第2希望時"]').append(dateText);
174
+
175
+ }
176
+
177
+ }
178
+
179
+ });
180
+
181
+
182
+
183
+ // 店舗 B
184
+
185
+ }else if($( this ).attr('id') == 'shop_b'){
186
+
187
+
188
+
189
+ $('input[name="1希望日"]').val('');
190
+
191
+ $('select[name="1希望時"]').val('');
192
+
193
+ $("input[name='第1希望日']").remove();
194
+
195
+ var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
196
+
197
+ $('select[name="第1希望時"').before($d01);
198
+
199
+
200
+
201
+ $('input[name="第2希望日"]').val('');
202
+
203
+ $('select[name="第2希望時"]').val('');
204
+
205
+ $("input[name='第2希望日']").remove();
206
+
207
+ var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
208
+
209
+ $('select[name="第2希望時"').before($d02);
210
+
211
+
212
+
213
+ $('.datepicker').datepicker({
214
+
215
+ dayNames: ['日', '月', '火', '水', '木', '金', '土'],
216
+
217
+ minDate: 0,
218
+
219
+ beforeShowDay: function(day) {
220
+
221
+ var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate();
222
+
223
+ var hName = ktHolidayName(dd);
224
+
225
+ // 休日設定
226
+
227
+ if ( day.getDay() == 0 ) return [false,'','休日'];
228
+
229
+ if ( day.getDay() == 1 ) return [false,'','休日'];
230
+
231
+ if ( day.getDay() == 2 ) return [false,'','休日'];
232
+
233
+ // 時間設定
234
+
235
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','11:00?18:00'];
236
+
237
+ return [true,'','11:00?18:00'];
238
+
239
+ },
240
+
241
+
242
+
243
+ onSelect: function(dateText, obj) {
244
+
245
+ var date1 = $(this).datepicker( 'getDate' ) || new Date();
246
+
247
+ var the_day=date1.getDay();
248
+
249
+ var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
250
+
251
+ var hName = ktHolidayName(dd);
252
+
253
+ if(the_day == 0 || hName != ""){
254
+
255
+ // 時間帯を選択 文字数制限のめ省略
256
+
257
+ }else{
258
+
259
+ // 時間帯を選択 文字数制限のため省略
260
+
261
+ }
262
+
263
+ if($(this).attr('name') == '第1希望日'){
264
+
265
+ $('select[name="第1希望時"] option').remove();
266
+
267
+ $('select[name="第1希望時"]').append(dateText);
268
+
269
+ }if($(this).attr('name') == '第2希望日'){
270
+
271
+ $('select[name="第2希望時"] option').remove();
272
+
273
+ $('select[name="第2希望時"]').append(dateText);
274
+
275
+ }
276
+
277
+ }
278
+
279
+ });
280
+
281
+
282
+
283
+ // 店舗 C
284
+
285
+ } else {
286
+
287
+ $('input[name="第1希望日"]').val('');
288
+
289
+ $('select[name="第1希望時"]').val('');
290
+
291
+ $("input[name='第1希望日']").remove();
292
+
293
+ var $d01='<input type="text" class="textarea datepicker" name="第1希望日"> ';
294
+
295
+ $('select[name="第1希望時"').before($d01);
296
+
297
+
298
+
299
+ $('input[name="第2希望日"]').val('');
300
+
301
+ $('select[name="第2希望時"]').val('');
302
+
303
+ $("input[name='第2希望日']").remove();
304
+
305
+ var $d02='<input type="text" class="textarea datepicker" name="第2希望日"> ';
306
+
307
+ $('select[name="第2希望時"').before($d02);
308
+
309
+
310
+
311
+ $('.datepicker').datepicker({
312
+
313
+ dayNames: ['日', '月', '火', '水', '木', '金', '土'],
314
+
315
+ minDate: 0,
316
+
317
+ beforeShowDay: function(day) {
318
+
319
+ var dd = day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate();
320
+
321
+ var hName = ktHolidayName(dd);
322
+
323
+ // 休日設定
324
+
325
+ if ( day.getDay() == 0 ) return [false,'','休日'];
326
+
327
+
328
+
329
+ // 時間設定
330
+
331
+ if ( day.getDay() == 0 || hName != "" ) return [true,'class-holiday','10:30?18:30'];
332
+
333
+ return [true,'','11:00?20:00'];
334
+
335
+ },
336
+
337
+ onSelect: function(dateText, obj) {
338
+
339
+ var date1 = $(this).datepicker( 'getDate' ) || new Date();
340
+
341
+ var the_day=date1.getDay();
342
+
343
+ var dd = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate();
344
+
345
+ var hName = ktHolidayName(dd);
346
+
347
+ if(the_day == 0 || hName != ""){
348
+
349
+ // 時間帯を選択 文字数制限のため省略
350
+
351
+ }else{
352
+
353
+ // 時間帯を選択 文字数制限のため省略
354
+
355
+ }if($(this).attr('name') == '第1希望日'){
356
+
357
+ $('select[name="第1希望時"] option').remove();
358
+
359
+ $('select[name="第1希望時"]').append(dateText);
360
+
361
+ }if($(this).attr('name') == '第2希望日'){
362
+
363
+ $('select[name="第2希望時"] option').remove();
364
+
365
+ $('select[name="第2希望時"]').append(dateText);
366
+
367
+ }
368
+
369
+ }
370
+
371
+ });
372
+
373
+ }
374
+
375
+ });
376
+
377
+ });
378
+
379
+
260
380
 
261
381
  ```
262
382
 
263
- head 直前
264
-
265
- ```ここに言語を入力
266
-
267
- <!-- # CSS -->
268
-
269
- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css">
270
-
271
- <!-- # jQuery -->
272
-
273
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
274
-
275
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
276
-
277
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
278
-
279
-
280
-
281
- ```
282
-
283
-
284
-
285
- カレンダー選択・時間選択
286
-
287
- ```ここに言語を入力
288
-
289
- var holidays = [];
290
-
291
- var list = [];
292
-
293
-
294
-
295
- jQuery(document).ready(function($){
296
-
297
- $( 'input[name="ご希望店舗名"]:radio' ).change( function() {
298
-
299
- // Shop A
300
-
301
- if($(this).attr('id') == 'shop_a'){
302
-
303
- // お盆や年末年始の休日を指定
304
-
305
- holidays = ['2017-08-13','2017-08-14','2017-08-15','2017-08-16','2017-08-17','2017-08-18','2017-08-19'];
306
-
307
- list = [
308
-
309
- [false, 'sunday'],
310
-
311
- [true, ''],
312
-
313
- [true, ''],
314
-
315
- [true, ''],
316
-
317
- [true, ''],
318
-
319
- [true, ''],
320
-
321
- [true, 'saturday'],
322
-
323
- ];
324
-
325
- }
326
-
327
- // Shop B
328
-
329
- else if($(this).is('#shop_b')){
330
-
331
- // お盆や年末年始の休日を指定
332
-
333
- holidays = ['2017-09-13','2017-09-14','2017-09-15','2017-09-16','2017-09-17','2017-09-18','2017-09-19'];
334
-
335
- list = [
336
-
337
- [false, 'sunday'],
338
-
339
- [true, ''],
340
-
341
- [true, ''],
342
-
343
- [false, ''],
344
-
345
- [true, ''],
346
-
347
- [true, ''],
348
-
349
- [false, 'saturday'],
350
-
351
- ];
352
-
353
- }
354
-
355
- // Shop C
356
-
357
- else if($(this).attr('id') == 'shop_c'){
358
-
359
- // お盆や年末年始の休日を指定
360
-
361
- holidays = ['2017-10-13','2017-10-14','2017-10-15','2017-10-16','2017-10-17','2017-10-18','2017-10-19'];
362
-
363
- list = [
364
-
365
- [true, 'sunday'],
366
-
367
- [false, ''],
368
-
369
- [true, ''],
370
-
371
- [false, ''],
372
-
373
- [true, ''],
374
-
375
- [false, ''],
376
-
377
- [true, 'saturday'],
378
-
379
- ];
380
-
381
- }
382
-
383
-
384
-
385
- $("#datepicker,#datepicker02").datepicker({
386
-
387
- // Option
388
-
389
- dayNames: ['日', '月', '火', '水', '木', '金', '土'],
390
-
391
- minDate: 0,
392
-
393
- showButtonPanel: true,
394
-
395
- beforeShowDay: function(date) {
396
-
397
- // 休日の判定
398
-
399
- for (var i = 0; i < holidays.length; i++) {
400
-
401
- var htime = Date.parse(holidays[i]);
402
-
403
- var holiday = new Date();
404
-
405
- holiday.setTime(htime);
406
-
407
-
408
-
409
- // 祝日
410
-
411
- if (holiday.getYear() == date.getYear() &&
412
-
413
- holiday.getMonth() == date.getMonth() &&
414
-
415
- holiday.getDate() == date.getDate()) {
416
-
417
- return [false, 'holiday'];
418
-
419
- }
420
-
421
- }
422
-
423
- return(list[date.getDay()]);
424
-
425
- },
426
-
427
-
428
-
429
- onSelect: function(dateText, inst) {
430
-
431
- $("#date_val").val(dateText);
432
-
433
- },
434
-
435
-
436
-
437
- onClose: function(dateText, inst) {
438
-
439
- $("#datepicker,#datepicker02").blur();
440
-
441
- }
442
-
443
- });
444
-
445
- });
446
-
447
-
448
-
449
- });
450
-
451
- ```
452
-
453
- 時間を代入したいのですが、どうしたらよいでしょうか。
454
-
455
-
456
-
457
383
  ご教授お願いします。