Q&A
前提
jQueryで日付の出力をしたいです。
都道府県のセレクターのvalueでエリア毎に日付が変わるようにしています。
valueが「area3」だったら出荷予定日から3日後等。
土日祝を営業日外としています。
実現したいこと
ECサイトでよくある都道府県別の配達指定可能な日付のを出力したいです。
発生している問題・エラーメッセージ
配達指定可能な日付が月をまたぐと存在しない日付になってしまいます。
出荷予定日が2022年9月26日で「北海道」を選択した場合「北海道」は出荷予定日からさらに5日後と設定しているので10月1日となって欲しいのですが、9月31日と表示されてしまいます。
該当のソースコード
HTML
1<body onLoad="schedule()"> 2 3 <div class="now"> 4 <span class="now-month" style="font-size: 140%;"></span>月 5 <span class="now-day" style="font-size: 140%;"></span>日11:59までのご注文で 6 </div> 7 <div class="schedule"> 8 <span class="schedule-month" style="font-size: 140%;"></span>月 9 <span class="schedule-day" style="font-size: 140%;"></span>日 10 （<span class="schedule-week"></span>）出荷予定です 11 </div> 12 13 14 <br><br> 15 <div class="text">都道府県絞り込み</div> 16 <select id="select" onchange="schedule();"> 17 <option value="area3">北海道</option> 18 <option value="area2">青森県</option> 19 <option value="area2">岩手県</option> 20 <option value="area2">秋田県</option> 21 <option value="area2">宮城県</option> 22 <option value="area2">山形県</option> 23 <option value="area2">福島県</option> 24 <option value="area1">茨城県</option> 25 <option value="area1">栃木県</option> 26 <option value="area1">群馬県</option> 27 <option value="area1">埼玉県</option> 28 <option value="area1">千葉県</option> 29 <option value="area1" selected>東京都</option> 30 <option value="area1">神奈川県</option> 31 <option value="area2">新潟県</option> 32 <option value="area2">富山県</option> 33 <option value="area2">石川県</option> 34 <option value="area2">福井県</option> 35 <option value="area2">山梨県</option> 36 <option value="area2">長野県</option> 37 <option value="area2">岐阜県</option> 38 <option value="area2">静岡県</option> 39 <option value="area2">愛知県</option> 40 <option value="area2">三重県</option> 41 <option value="area2">滋賀県</option> 42 <option value="area2">京都府</option> 43 <option value="area2">大阪府</option> 44 <option value="area2">兵庫県</option> 45 <option value="area2">奈良県</option> 46 <option value="area2">和歌山県</option> 47 <option value="area3">鳥取県</option> 48 <option value="area3">島根県</option> 49 <option value="area3">岡山県</option> 50 <option value="area3">広島県</option> 51 <option value="area3">山口県</option> 52 <option value="area3">徳島県</option> 53 <option value="area3">香川県</option> 54 <option value="area3">愛媛県</option> 55 <option value="area3">高知県</option> 56 <option value="area3">福岡県</option> 57 <option value="area3">佐賀県</option> 58 <option value="area3">長崎県</option> 59 <option value="area3">熊本県</option> 60 <option value="area3">大分県</option> 61 <option value="area3">宮崎県</option> 62 <option value="area3">鹿児島県</option> 63 <option value="area3">沖縄県</option> 64 </select> 65 <div class="result"> 66 お届け日指定可能 67 <span class="specify-month"></span>月 68 <span class="specify-day"></span>日 69 （<span class="specify-week"></span>）〜</apan> 70 </div> 71 72</body>
jQuery
1var now_dt = new Date(); 2$('.now-month').text(("" + (now_dt.getMonth() +1 ))); 3$('.now-day').text(("" + now_dt.getDate())); 4 5function schedule(){ 6 // 祝日の設定 7 holDay = new Array( 8 "2022/9/19", // 敬老の日 9 "2022/9/23", // 秋分の日 10 "2022/10/10", // スポーツの日 11 "2022/11/3", // 文化の日 12 "2022/11/23" // 勤労感謝の日 13 ); 14 dayWek = new Array("日", "月", "火", "水", "木", "金", "土","日", "月", "火", "水", "木", "金", "土"); 15 16 dt = new Date(); 17 // 今日から2営業日先 18 for(i = 0; i < 2; i++) { 19 dt.setTime(dt.getTime() + (1 * 24 * 3600 * 1000)); 20 if( dt.getDay() == 6 || dt.getDay() == 0 ) i--; 21 for(j = 0; j < holDay.length; j++) { 22 hd = holDay[j].split("/"); 23 if(hd[0] == dt.getYear() + 1900 && hd[1] == dt.getMonth() + 1 && hd[2] == dt.getDate()) i--; 24 } 25 } 26 shpDt = ""; 27 shpDt += dt.getMonth() + 1; 28 shpDt += dt.getDate(); 29 shpDt += dayWek[dt.getDay()] ; 30 shpDt += ""; 31 32 $('.schedule-month').text((""+(dt.getMonth()+1))); 33 $('.schedule-day').text((""+(dt.getDate()))); 34 $('.schedule-week').text((""+(dayWek[dt.getDay()]))); 35 36 // 都道府県別のお届け指定可能日の設定 37 if (document.getElementById("select")) { 38 sBox = document.getElementById("select").value; 39 40 if (sBox == "area1") { 41 // 出荷予定日から1日後 42 $('.specify-month').text((""+(dt.getMonth()+1))); 43 $('.specify-day').text((""+(dt.getDate()+1))); 44 $('.specify-week').text((""+(dayWek[dt.getDay()+1]))); 45 } else if (sBox == "area2") { 46 // 出荷予定日から2日後 47 $('.specify-month').text((""+(dt.getMonth()+1))); 48 $('.specify-day').text((""+(dt.getDate()+2))); 49 $('.specify-week').text((""+(dayWek[dt.getDay()+2]))); 50 } else if (sBox == "area3") { 51 // 出荷予定日から5日後 52 $('.specify-month').text((""+(dt.getMonth()+1))); 53 $('.specify-day').text((""+(dt.getDate()+5))); 54 $('.specify-week').text((""+(dayWek[dt.getDay()+5]))); 55 } 56 } 57 58}
試したこと
調べてみたところ日付の計算を行う際setDateを使うという参考サイトがあったのですが、setDate(dt.getDate)のように記述を変えてみたのですが出力して欲しい結果になりませんでした。
回答1件
0
ベストアンサー
全体は見てませんが、日付加算のとこだけ。
dt.setDate(dt.getDate()+5);で5日後の日付になります。
その日付から、getMonth(), getDate() で年, 月を取得します。
JavaScript/JQuery
1 if (sBox == "area1") { 2 // 出荷予定日から1日後 3 dt.setDate(dt.getDate()+1); 4 $('.specify-month').text((""+(dt.getMonth()+1))); 5 $('.specify-day').text((""+(dt.getDate()))); 6 $('.specify-week').text((""+(dayWek[dt.getDay()]))); 7 } else if (sBox == "area2") { 8 // 出荷予定日から2日後 9 dt.setDate(dt.getDate()+2); 10 $('.specify-month').text((""+(dt.getMonth()+1))); 11 $('.specify-day').text((""+(dt.getDate()+2))); 12 $('.specify-week').text((""+(dayWek[dt.getDay()+2]))); 13 } else if (sBox == "area3") { 14 // 出荷予定日から5日後 15 dt.setDate(dt.getDate()+5); 16 $('.specify-month').text(""+(dt.getMonth()+1)); 17 $('.specify-day').text((""+(dt.getDate()))); 18 $('.specify-week').text((""+(dayWek[dt.getDay()]))); 19 }
投稿2022/09/21 13:59
総合スコア33699
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/09/21 14:11