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

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

ただいまの
回答率

89.89%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 71

hemoglobin

score 2

前提・実現したいこと

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

1:サイトに書かれていた<input type="date">を使ってChrome/Edgeで確認すると空欄のままです。
枠を押すと今日の日付が選択できますが、他の日に変更ができるようです。
出来たら<input type="date">を使って3週間後の日付(可能であれば曜日も)を出したいのですが、反応してくれません。
<input>ではだめなのかと思い、<script>で日付表示をすると、同じように今日の日付は出ますが3週間後を指定するとプレビューから文字が消えてしまいます。
<input>のjavascriptは下のソースコードに貼っています。
html内に<script>はいれています。
<script>
var hiduke=new Date();
var year = hiduke.getFullYear();
var month = hiduke.getMonth()+1;
var week = hiduke.getDay();
var day = hiduke.getDate();
var yobi= new Array("日","月","火","水","木","金","土");

document.write(+year+"/"+month+"/"+day+"/ "+"("+yobi[week]+")");

</script>

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

2:3週間後の日が祝日だと次の日に自動的に変更されるようにもしたいのですが、調べてもなかなか引っかからず。。
javascriptでは難しいのでしょうか?他の言語では可能ですか?
<script>か<input>でいけるのであればやり方を教えていただきたいです。

該当のソースコード

function () {
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate()+21); //翌日の日付を取得
    var yyyy = tomorrow.getFullYear();
    var mm = ("0"+(tomorrow.getMonth()+1)).slice(-2);
    var dd = ("0"+tomorrow.getDate()).slice(-2);
    document.getElementById("tomorrow").value=yyyy+'-'+mm+'-'+dd;
}

試したこと

https://qiita.com/acht_web/items/cb5edabb5f835fc0c27f
http://wakalog.hatenadiary.jp/entry/2017/10/25/104040
https://www.pazru.net/js/date/1.html
を参考しています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • thyda.eiqau

    2020/01/15 00:22

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

    キャンセル

  • asuchi0819

    2020/01/15 00:25 編集

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

    キャンセル

  • hemoglobin

    2020/01/15 00:41

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

    >>asuchi0819様
    そうなのですか、どうりで出てこないわけですね・・。
    教えてくださってありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+2

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

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

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<main>
  <p>ページを開いた日時: <span id="today"></span></p>
  <p>3週間後: <span id="after3weeks"></span></p>
  <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
</main>
</body>
</html>
const weekdays = ['日', '月', '火', '水', '木', '金', '土'];

// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
2020/1/1,元日
2020/1/13,成人の日
2020/2/11,建国記念の日
2020/2/23,天皇誕生日
2020/2/24,休日
2020/3/20,春分の日
2020/4/29,昭和の日
2020/5/3,憲法記念日
2020/5/4,みどりの日
2020/5/5,こどもの日
2020/5/6,休日
2020/7/23,海の日
2020/7/24,スポーツの日
2020/8/10,山の日
2020/9/21,敬老の日
2020/9/22,秋分の日
2020/11/3,文化の日
2020/11/23,勤労感謝の日
`.split(/\r\n+/).map(row => row.split(',')[0]);

const now = Date.now();
const today = new Date(now);
const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000); // 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒

let ifHolidayDate = new Date(afterThreeWeek.getTime());
while(holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()}`) !== -1) {
  ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
}

document.getElementById('today').textContent = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent = `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth()+1}/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent = `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 01:33

    細かく教えてくださりありがとうございます!
    今日1日ずっと悩んでいたのでとても助かりました。
    2つ目の回答まで答えていただけると思わなかったのでとても嬉しいです。
    夜遅くの質問だったのにすぐに回答していただきありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.89%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる