特定エリアに今日の日付を挿入し、その日にちを起算日として他エリアに日付を挿入したい

Question

特定エリアに今日の日付を挿入し、その日にちを起算日として他エリアに日付を挿入したいです。

具体的構成は以下の通りで、第三希望日までを入力するフォームを作成したいと考えています。

<div class="hoge_01">
第一希望日
<p class="hoge_p01">希望日が<span class="today"></span>の場合、<span class="day1"></span>以降で指定してください。</p>
<label>
<input name="t1_y" type="text" value="" class="year one-byte">年
<input name="t1_m" type="text" value="" class="month one-byte">月
<input name="t1_d" type="text" value="" class="date one-byte">日
</label>
</div>
<div class="hoge_02">
第二希望日
<p class="hoge_p02">第一希望日が<span class="day1"></span>の場合、<span class="day2"></span>以降で指定してください。</p>
<label>
<input name="t2_y" type="text" value="" class="year one-byte">年
<input name="t2_m" type="text" value="" class="month one-byte">月
<input name="t2_d" type="text" value="" class="date one-byte">日
</label>
</div>
<div class="hoge_03">
第三希望日
<p class="hoge_p03">第二希望日が<span class="day2"></span>の場合、<span class="day3"></span>以降で指定してください。</p>
<label>
<input name="t3_y" type="text" value="" class="year one-byte">年
<input name="t3_m" type="text" value="" class="month one-byte">月
<input name="t3_d" type="text" value="" class="date one-byte">日
</label>
</div>

「today」に今日の日にちを挿入し、それを起算日として翌営業日換算で7日後の日にちを「day1」に、さらにそれから7日後の日にちを「day2」に、7日後の日にちを「day3」に自動的に挿入したいです。さらにそれぞれのエリアのinputタグの「placeholder」としても年月日を挿入したいです。

例えば閲覧タイミングが2016年1月5日の場合以下の通りになります。

<div class="hoge_01">
第一希望日
<p class="hoge_p01">希望日が<span class="today">2016年1月5日</span>の場合、<span class="day1">2016年1月12日</span>以降で指定してください。</p>
<label>
<input name="t1_y" type="text" value="" class="year one-byte" placeholder="例）2015">年
<input name="t1_m" type="text" value="" class="month one-byte" placeholder="1">月
<input name="t1_d" type="text" value="" class="date one-byte" placeholder="12">日
</label>
</div>
<div class="hoge_02">
第二希望日
<p class="hoge_p02">第一希望日が<span class="day1">2016年1月12日</span>の場合、<span class="day2">2016年1月19日</span>以降で指定してください。</p>
<label>
<input name="t2_y" type="text" value="" class="year one-byte" placeholder="例）2015">年
<input name="t2_m" type="text" value="" class="month one-byte" placeholder="1">月
<input name="t2_d" type="text" value="" class="date one-byte" placeholder="19">日
</label>
</div>
<div class="hoge_03">
第三希望日
<p class="hoge_p03">第二希望日が<span class="day2">2016年1月19日</span>の場合、<span class="day3">2016年1月26日</span>以降で指定してください。</p>
<label>
<input name="t3_y" type="text" value="" class="year one-byte" placeholder="例）2015">年
<input name="t3_m" type="text" value="" class="month one-byte" placeholder="1">月
<input name="t3_d" type="text" value="" class="date one-byte" placeholder="26">日
</label>
</div>

当方JS初心者のため説明がわかりにくいかと思いますが、ご教授のほどよろしくお願いいたします。

Comments

[izkn]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

[退会済みユーザー]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

javascriptにて当日の日付を取得し、そこから日付計算をすることによって可能だと思います。
もしよろしければ一度ロジックを書いてみて、それを元に質問してみたほうが良いと思います。

javascriptで今日から何日後の日付と曜日を簡単に取れる方法
http://www.zanmai.net/blog/data/140.html

Comments

[castail]

ご回答ありがとうございます。

ロジックをどう立てれば良いかすら分からなかったためご質問した次第です。
お教えいただいたページを参考にしたいと思います。

[deadcode]

スキル的にどのレベルかがわかりませんが、ある程度JQuery（タグが付いてたので^^;）を触った事ある、ないし、動かしたことがあるのであれば下記サイトを参考にしてみてもいいかもしれないです。
結構丁寧に書かれています。

jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
http://jquery.nj-clucker.com/innerhtml-edit-get-add-del/

jQueryでのDOM操作
http://tatenosystem.com/how_to_javascript_4.html

JQueryリファレンス
http://semooh.jp/jquery/

[deadcode]

連投ごめんなさい。
今の質問だとロジックや書き方を促す形になってしまうので

https://teratail.com/help/avoid-asking

上記にもあるように、ロジックをどう立てれば良いかすら分からないというのは、一部推奨していない質問に抵触してしまう可能性があるため、どんな形でも良いので、調べて書いてみたけど動かない等の質問が望ましいと思います。

問題を詳細化し、明確な質問をすると回答してくれる方も多く、解決速度があがると思います。
がんばってください！