ezr/dates.html

## dates.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
    background-color: #2E2E2E;
    color: #E2E2E2;
    font-size: 1.3em;
}
</style>
</head>

<body>
<h3>Difference between two dates</h3>
<form name="difference">
  year:
  <input type="text" name="year1" maxlength="4" size="4">
  month:
  <input type="text" name="month1" maxlength="4" size="4">
  day:
  <input type="text" name="day1" maxlength="4" size="4">
  <br><br>
  year:
  <input type="text" name="year2" maxlength="4" size="4">
  month:
  <input type="text" name="month2" maxlength="4" size="4">
  day:
  <input type="text" name="day2" maxlength="4" size="4">
  <input type="button" value="calculate" onclick="showDifference();">
</form><br>
<!--<p id="result"></p>-->
<table id="tbl">
<tr>difference:<tr>
<td></td>
</table>

<script type="text/javascript">
function showDifference() {
    let year1 = document.forms['difference'].elements['year1'].value
    let month1 = document.forms['difference'].elements['month1'].value
    let day1 = document.forms['difference'].elements['day1'].value
    let year2 = document.forms['difference'].elements['year2'].value
    let month2 = document.forms['difference'].elements['month2'].value
    let day2 = document.forms['difference'].elements['day2'].value


    // the month gets indexed from 0 for some
    // reason while the year and day do not
    let d1 = new Date(year1, month1 - 1, day1);
    if (year1 == "") {
        d1 = new Date(); // today
    }
    let d2 = new Date(year2, month2 - 1, day2);
    if (year2 == "") {
        d2 = new Date(); // today
    }
    let msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
    let diff = (d2.getTime() - d1.getTime()) / msPerDay;
    document.getElementById("tbl").rows[1].cells[0].innerHTML = diff;
}
</script>
<br><br><br>
<h3>Add days to a date</h3>
<form name="add">
  year:
  <input type="text" name="year" maxlength="4" size="4">
  month:
  <input type="text" name="month" maxlength="4" size="4">
  day:
  <input type="text" name="day" maxlength="4" size="4">
  <br><br>
  days to add:
  <input type="text" name="addDays" maxlength="6" size="6">
  <input type="button" value="calculate" onclick="addToDate();">
</form><br>
<p>date:</p>
<p id="result"></p>
<script>
function addToDate() {
    let year = document.forms['add'].elements['year'].value;
    let month = document.forms['add'].elements['month'].value;
    let day = document.forms['add'].elements['day'].value;
    let daysToAdd = Number(document.forms['add'].elements['addDays'].value);
    let d = new Date(year, month - 1, day);
    if (year == "") {
        d = new Date();
    }
    d.setDate(d.getDate() + daysToAdd);
    document.getElementById("result").innerHTML = d;
}
</script>
<br><br><br>
<p>(leave date blank to use current date)</p>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style>
	body {
	background-color: #2E2E2E;
	color: #E2E2E2;
	font-size: 1.3em;
	}
	</style>
	</head>

	<body>
	<h3>Difference between two dates</h3>
	<form name="difference">
	year:
	<input type="text" name="year1" maxlength="4" size="4">
	month:
	<input type="text" name="month1" maxlength="4" size="4">
	day:
	<input type="text" name="day1" maxlength="4" size="4">
	<br><br>
	year:
	<input type="text" name="year2" maxlength="4" size="4">
	month:
	<input type="text" name="month2" maxlength="4" size="4">
	day:
	<input type="text" name="day2" maxlength="4" size="4">
	<input type="button" value="calculate" onclick="showDifference();">
	</form><br>
	<!--<p id="result"></p>-->
	<table id="tbl">
	<tr>difference:<tr>
	<td></td>
	</table>

	<script type="text/javascript">
	function showDifference() {
	let year1 = document.forms['difference'].elements['year1'].value
	let month1 = document.forms['difference'].elements['month1'].value
	let day1 = document.forms['difference'].elements['day1'].value
	let year2 = document.forms['difference'].elements['year2'].value
	let month2 = document.forms['difference'].elements['month2'].value
	let day2 = document.forms['difference'].elements['day2'].value


	// the month gets indexed from 0 for some
	// reason while the year and day do not
	let d1 = new Date(year1, month1 - 1, day1);
	if (year1 == "") {
	d1 = new Date(); // today
	}
	let d2 = new Date(year2, month2 - 1, day2);
	if (year2 == "") {
	d2 = new Date(); // today
	}
	let msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
	let diff = (d2.getTime() - d1.getTime()) / msPerDay;
	document.getElementById("tbl").rows[1].cells[0].innerHTML = diff;
	}
	</script>
	<br><br><br>
	<h3>Add days to a date</h3>
	<form name="add">
	year:
	<input type="text" name="year" maxlength="4" size="4">
	month:
	<input type="text" name="month" maxlength="4" size="4">
	day:
	<input type="text" name="day" maxlength="4" size="4">
	<br><br>
	days to add:
	<input type="text" name="addDays" maxlength="6" size="6">
	<input type="button" value="calculate" onclick="addToDate();">
	</form><br>
	<p>date:</p>
	<p id="result"></p>
	<script>
	function addToDate() {
	let year = document.forms['add'].elements['year'].value;
	let month = document.forms['add'].elements['month'].value;
	let day = document.forms['add'].elements['day'].value;
	let daysToAdd = Number(document.forms['add'].elements['addDays'].value);
	let d = new Date(year, month - 1, day);
	if (year == "") {
	d = new Date();
	}
	d.setDate(d.getDate() + daysToAdd);
	document.getElementById("result").innerHTML = d;
	}
	</script>
	<br><br><br>
	<p>(leave date blank to use current date)</p>
	</body>
	</html>