質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

jQueryで商品の配達指定可能日を出力したいです。

w.itsuki
w.itsuki

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0リアクション

0クリップ

161閲覧

投稿2022/09/21 11:33

前提

jQueryで日付の出力をしたいです。
都道府県のセレクターのvalueでエリア毎に日付が変わるようにしています。
valueが「area3」だったら出荷予定日から3日後等。
土日祝を営業日外としています。

実現したいこと

ECサイトでよくある都道府県別の配達指定可能な日付のを出力したいです。

発生している問題・エラーメッセージ

配達指定可能な日付が月をまたぐと存在しない日付になってしまいます。
出荷予定日が2022年9月26日で「北海道」を選択した場合「北海道」は出荷予定日からさらに5日後と設定しているので10月1日となって欲しいのですが、9月31日と表示されてしまいます。

該当のソースコード

HTML

<body onLoad="schedule()"> <div class="now"> <span class="now-month" style="font-size: 140%;"></span>月 <span class="now-day" style="font-size: 140%;"></span>日11:59までのご注文で </div> <div class="schedule"> <span class="schedule-month" style="font-size: 140%;"></span>月 <span class="schedule-day" style="font-size: 140%;"></span>日 (<span class="schedule-week"></span>)出荷予定です </div> <br><br> <div class="text">都道府県絞り込み</div> <select id="select" onchange="schedule();"> <option value="area3">北海道</option> <option value="area2">青森県</option> <option value="area2">岩手県</option> <option value="area2">秋田県</option> <option value="area2">宮城県</option> <option value="area2">山形県</option> <option value="area2">福島県</option> <option value="area1">茨城県</option> <option value="area1">栃木県</option> <option value="area1">群馬県</option> <option value="area1">埼玉県</option> <option value="area1">千葉県</option> <option value="area1" selected>東京都</option> <option value="area1">神奈川県</option> <option value="area2">新潟県</option> <option value="area2">富山県</option> <option value="area2">石川県</option> <option value="area2">福井県</option> <option value="area2">山梨県</option> <option value="area2">長野県</option> <option value="area2">岐阜県</option> <option value="area2">静岡県</option> <option value="area2">愛知県</option> <option value="area2">三重県</option> <option value="area2">滋賀県</option> <option value="area2">京都府</option> <option value="area2">大阪府</option> <option value="area2">兵庫県</option> <option value="area2">奈良県</option> <option value="area2">和歌山県</option> <option value="area3">鳥取県</option> <option value="area3">島根県</option> <option value="area3">岡山県</option> <option value="area3">広島県</option> <option value="area3">山口県</option> <option value="area3">徳島県</option> <option value="area3">香川県</option> <option value="area3">愛媛県</option> <option value="area3">高知県</option> <option value="area3">福岡県</option> <option value="area3">佐賀県</option> <option value="area3">長崎県</option> <option value="area3">熊本県</option> <option value="area3">大分県</option> <option value="area3">宮崎県</option> <option value="area3">鹿児島県</option> <option value="area3">沖縄県</option> </select> <div class="result"> お届け日指定可能 <span class="specify-month"></span>月 <span class="specify-day"></span>日 (<span class="specify-week"></span>)〜</apan> </div> </body>

jQuery

var now_dt = new Date(); $('.now-month').text(("" + (now_dt.getMonth() +1 ))); $('.now-day').text(("" + now_dt.getDate())); function schedule(){ // 祝日の設定 holDay = new Array( "2022/9/19", // 敬老の日 "2022/9/23", // 秋分の日 "2022/10/10", // スポーツの日 "2022/11/3", // 文化の日 "2022/11/23" // 勤労感謝の日 ); dayWek = new Array("日", "月", "火", "水", "木", "金", "土","日", "月", "火", "水", "木", "金", "土"); dt = new Date(); // 今日から2営業日先 for(i = 0; i < 2; i++) { dt.setTime(dt.getTime() + (1 * 24 * 3600 * 1000)); if( dt.getDay() == 6 || dt.getDay() == 0 ) i--; for(j = 0; j < holDay.length; j++) { hd = holDay[j].split("/"); if(hd[0] == dt.getYear() + 1900 && hd[1] == dt.getMonth() + 1 && hd[2] == dt.getDate()) i--; } } shpDt = ""; shpDt += dt.getMonth() + 1; shpDt += dt.getDate(); shpDt += dayWek[dt.getDay()] ; shpDt += ""; $('.schedule-month').text((""+(dt.getMonth()+1))); $('.schedule-day').text((""+(dt.getDate()))); $('.schedule-week').text((""+(dayWek[dt.getDay()]))); // 都道府県別のお届け指定可能日の設定 if (document.getElementById("select")) { sBox = document.getElementById("select").value; if (sBox == "area1") { // 出荷予定日から1日後 $('.specify-month').text((""+(dt.getMonth()+1))); $('.specify-day').text((""+(dt.getDate()+1))); $('.specify-week').text((""+(dayWek[dt.getDay()+1]))); } else if (sBox == "area2") { // 出荷予定日から2日後 $('.specify-month').text((""+(dt.getMonth()+1))); $('.specify-day').text((""+(dt.getDate()+2))); $('.specify-week').text((""+(dayWek[dt.getDay()+2]))); } else if (sBox == "area3") { // 出荷予定日から5日後 $('.specify-month').text((""+(dt.getMonth()+1))); $('.specify-day').text((""+(dt.getDate()+5))); $('.specify-week').text((""+(dayWek[dt.getDay()+5]))); } } }

試したこと

調べてみたところ日付の計算を行う際setDateを使うという参考サイトがあったのですが、setDate(dt.getDate)のように記述を変えてみたのですが出力して欲しい結果になりませんでした。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。