javascriptで3週間後の日付を出したい、指定の曜日を飛ばしたい

前提・実現したいこと

プログラミング初心者です。
仕事で早急に必要になったため、手探りでいろんな方のサイトを見ながら作っています。
html/cssはほんの少しかじった程度、プログラミング言語は無知のため、質問自体に問題があったら申し訳ありません。
２つ質問させていただきます。

１：サイトに書かれていた<input type="date">を使ってChrome/Edgeで確認すると空欄のままです。
枠を押すと今日の日付が選択できますが、他の日に変更ができるようです。
出来たら<input type="date">を使って３週間後の日付（可能であれば曜日も）を出したいのですが、反応してくれません。
<input>ではだめなのかと思い、<script>で日付表示をすると、同じように今日の日付は出ますが３週間後を指定するとプレビューから文字が消えてしまいます。
<input>のjavascriptは下のソースコードに貼っています。
html内に<script>はいれています。

var hiduke=new Date()+21;
と打ってみたのですが、ここに記入するだけではいけないのでしょうか？

２：３週間後の日が祝日だと次の日に自動的に変更されるようにもしたいのですが、調べてもなかなか引っかからず。。
javascriptでは難しいのでしょうか？他の言語では可能ですか？

thyda.eiqau

2020/01/14 15:22

> １：サイトに書かれていた<input type="date">を使ってChrome/Edgeで確認すると空欄のままです。 > 枠を押すと今日の日付が選択できますが、他の日に変更ができるようです。固定で、ページを開いた時点から3週間後の日付を表示したい、表示内容はユーザーが操作(変更)できないようにしたいという意味ですか？要件は、「3週間後の日付を表示すること」であって、表示できればなんでもよいのか、それともinputにこだわる必要があるのか、ご提示ください。

kyoya0819

2020/01/14 15:25 編集

アドバイスだけですが、今現在。JavaScriptに日本の祝日を判別するなんて、気配りのきいた機能はないので何かしらのAPIを使う必要があります。

退会済みユーザー

2020/01/14 15:41

>>thyda.eiqau様 <input>での表示が格好よさそう、というだけです。 3週間後の日付が出るのならどのものでも大丈夫です。・・・すみません、こうやって返答するより編集したほうがいいのでしょうか編集したほうがいいのであればすぐに編集します。 >>asuchi0819様そうなのですか、どうりで出てこないわけですね・・。教えてくださってありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

3週間後の表示はなんでもいいとのことなので、textContentにベタ書きしています。
追記・修正の依頼の欄にasuchi0819さんからコメントがありますが、JavaScriptに、どの日が祝日かどうかを判別してくれる機能はないです。そもそも世界中で使われているので日本の祝日がどうこうというのが現実的ではないことはおわかりになるかと思います。

一般的にはGoogleカレンダーAPIを利用して取得することもあるかと思いますが、そこまででなければ内閣府が祝日のCSVを提供しているので、ダウンロードしてきて使うというのもありかと思います。今回はコード中に直接書いていますが、ダウンロードしてきたCSVをHTMLと同じサーバーにアップロードすればAjax (fetch) でも取得可能です。PHPなどが使えるなら内閣府に直リンすることもできますが、お行儀がよくないので推奨はできません。

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>demo</title>
6</head>
7<body>
8<main>
9  <p>ページを開いた日時: <span id="today"></span></p>
10  <p>3週間後: <span id="after3weeks"></span></p>
11  <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
12</main>
13</body>
14</html>

js
1const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
2
3// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
4const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
52020/1/1,元日
62020/1/13,成人の日
72020/2/11,建国記念の日
82020/2/23,天皇誕生日
92020/2/24,休日
102020/3/20,春分の日
112020/4/29,昭和の日
122020/5/3,憲法記念日
132020/5/4,みどりの日
142020/5/5,こどもの日
152020/5/6,休日
162020/7/23,海の日
172020/7/24,スポーツの日
182020/8/10,山の日
192020/9/21,敬老の日
202020/9/22,秋分の日
212020/11/3,文化の日
222020/11/23,勤労感謝の日
23`.split(/\r\n+/).map(row => row.split(',')[0]);
24
25const now = Date.now();
26const today = new Date(now);
27const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000); // 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒
28
29let ifHolidayDate = new Date(afterThreeWeek.getTime());
30while(holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()}`) !== -1) {
31  ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
32}
33
34document.getElementById('today').textContent = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()} (${weekdays[today.getDay()]})`;
35document.getElementById('after3weeks').textContent = `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth()+1}/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
36document.getElementById('after3weeksIfHoliday').textContent = `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
37