We Blog Weblog

今日の何日後

ブログ

2022年4月20日

今日の何日後は何月何日か計算するツールを作ってみました。

日後
ここに結果が出ます

 

日付入力欄は<input type="date">
日数入力欄は<input type="number">を使います。
IDをそれぞれnyuryoku、nyuryoku2とします。

<input type="date" id="nyuryoku">

<input type="number" id="nyuryoku2">

<input type="date">は、曜日を表示することはできないようです。
クリックしたらカレンダーが出てくるので曜日はそれでまあなんとか。


計算ボタンと結果出力欄を設置します。
IDをそれぞれkeisan、kekkaとします。

<input type="date" id="nyuryoku">

<input type="number" id="nyuryoku2">

<button id="keisan">計算!</button>

<span id="kekka">ここに結果が出ます</span>

#nyuryokuの初期値を今日の日付に設定します。

参考:ワカログ|input="date"に現在の日付(今日の日付)を設定する

月や日が一桁の時は十の位に0が表示されるようにしています。
これをゼロ埋め(zero padding)というそうです。


#keisanを押すと#nyuryokuの日付に#nyuryoku2の日数が加算され、#kekkaに出力されるようにします。

document.getElementById("keisan").onclick = function() {
  var dt = new Date($('#nyuryoku').val());
  dt.setDate(dt.getDate() + +$('#nyuryoku2').val());
  $('#kekka').text(dt);
};

参考:JavaScriptメモ|日付計算(何日後、何日前)


一応これで完成ですが、このままだと結果が「Wed Apr 20 2022 09:00:00 GMT+0900(日本標準時)」のように出力されます。
これを「2022年4月20日水曜日」に変換します。

document.getElementById("keisan").onclick = function() {
  var dt = new Date($('#nyuryoku').val());
  dt.setDate(dt.getDate() + +$('#nyuryoku2').val());
  
  var dayOfWeekStrJP = ["日", "月", "火", "水", "木", "金", "土", ]
  
  var formatted = `
  ${dt.getFullYear()}年
  ${(dt.getMonth()+1).toString().padStart(2, '0')}月
  ${dt.getDate().toString().padStart(2, '0')}日
  ${dayOfWeekStrJP[dt.getDay()]}曜日
  `.replace(/\n|\r/g, '');

  $('#kekka').text(formatted);
};

参考:PisukeCode - Web開発まとめ|JavaScriptで日付(Date)をフォーマットする3つの方法

「テンプレートリテラル」という方法を使ってみました。

マイナスの数値を入力すれば「何日前」も計算できます。

ケミストでは引き続き「ブログ」のテーマを募集しています!
調べてほしい、まとめてほしい薬の情報がありましたら教えてください。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP