JavaScriptで日数計算をする方法
久しぶりにJavaScriptを使う機会がありました。
やったのは日数計算です。
JavaScriptは日付の取扱に癖があります。
思い出しながら書いたので重要なところだけをメモにしておきます。
経過日数
ある日からある日までの日数を計算します。
<label for="date_from">開始日</label>
<input type="date" id="date_from" value="">
<label for="date_to">終了日</label>
<input type="date" id="date_to" value="">
<button onclick="click_calc()">実行</button>
<div id="div_answer">計算結果</div>
<script>
function click_calc(){
date_from = document.getElementById("date_from").value;
date_to = document.getElementById("date_to").value;
ymd_from = date_from.split("-")
ymd_to = date_to.split("-")
obj_from = new Date(Number(ymd_from[0]), Number(ymd_from[1]) - 1, Number(ymd_from[2]));
obj_to = new Date(Number(ymd_to[0]), Number(ymd_to[1]) - 1, Number(ymd_to[2]));
days_dif = (obj_to - obj_from) / 24 / 60 / 60 / 1000;
document.getElementById("div_answer").innerHTML = days_dif;
}
</script>
<input type="date" id="date_from" value="">
<label for="date_to">終了日</label>
<input type="date" id="date_to" value="">
<button onclick="click_calc()">実行</button>
<div id="div_answer">計算結果</div>
<script>
function click_calc(){
date_from = document.getElementById("date_from").value;
date_to = document.getElementById("date_to").value;
ymd_from = date_from.split("-")
ymd_to = date_to.split("-")
obj_from = new Date(Number(ymd_from[0]), Number(ymd_from[1]) - 1, Number(ymd_from[2]));
obj_to = new Date(Number(ymd_to[0]), Number(ymd_to[1]) - 1, Number(ymd_to[2]));
days_dif = (obj_to - obj_from) / 24 / 60 / 60 / 1000;
document.getElementById("div_answer").innerHTML = days_dif;
}
</script>
経過年月日
ある日からある日数を経過した年月日を調べます。
<label for="date_from">基準日</label>
<input type="date" id="date_from" value="">
<label for="days_add">日数</label>
<input type="number" id="days_add" value="">
<button onclick="click_calc()">実行</button>
<div id="div_answer">計算結果</div>
<script>
function click_calc(){
date_from = document.getElementById("date_from").value;
days_add = document.getElementById("days_add").value;
ymd = date_from.split("-");
obj_added = new Date(Number(ymd[0]), Number(ymd[1]) - 1, Number(ymd[2]) + Number(days_add));
parts = [obj_added.getFullYear(), obj_added.getMonth() + 1, obj_added.getDate()];
date_added = parts.join("-");
document.getElementById("div_answer").innerHTML = date_added;
}
</script>
<input type="date" id="date_from" value="">
<label for="days_add">日数</label>
<input type="number" id="days_add" value="">
<button onclick="click_calc()">実行</button>
<div id="div_answer">計算結果</div>
<script>
function click_calc(){
date_from = document.getElementById("date_from").value;
days_add = document.getElementById("days_add").value;
ymd = date_from.split("-");
obj_added = new Date(Number(ymd[0]), Number(ymd[1]) - 1, Number(ymd[2]) + Number(days_add));
parts = [obj_added.getFullYear(), obj_added.getMonth() + 1, obj_added.getDate()];
date_added = parts.join("-");
document.getElementById("div_answer").innerHTML = date_added;
}
</script>
今日の日付をセット
おまけです。
ページを開いたときにテキストボックスに今日の日付を自動的にセットする方法です。
set_today();
function set_today(){
obj_today = new Date();
parts = [obj_today.getFullYear(), (obj_today.getMonth() + 1).toString().padStart(2,"0"), obj_today.getDate().toString().padStart(2,"0")];
date_today = parts.join("-");
document.getElementById("date_base").value = date_today;
}
function set_today(){
obj_today = new Date();
parts = [obj_today.getFullYear(), (obj_today.getMonth() + 1).toString().padStart(2,"0"), obj_today.getDate().toString().padStart(2,"0")];
date_today = parts.join("-");
document.getElementById("date_base").value = date_today;
}
[ 2023年2月3日 | カテゴリー: JavaScript | タグ: 日付 ]
« 「17着だけ服があれば一年中違う服装が可能」は本当か | ドラえもんの本当の姿 »
コメントを残す