HTML code of Days Between Two Dates | Date Calculator
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Date Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.calculator {
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type=”date”] {
width: 100%;
padding: 8px;
}
input[type=”submit”] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
input[type=”submit”]:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>Date Calculator</h1>
<div class=”calculator”>
<form id=”dateForm”>
<div class=”form-group”>
<label for=”startDate”>Start Date:</label>
<input type=”date” id=”startDate” required>
</div>
<div class=”form-group”>
<label for=”endDate”>End Date:</label>
<input type=”date” id=”endDate” required>
</div>
<div class=”form-group”>
<label for=”outputType”>Output:</label>
<select id=”outputType”>
<option value=”ymd”>Years, Months, Days</option>
<option value=”wd”>Weeks, Days</option>
<option value=”td”>Total Days</option>
</select>
</div>
<input type=”submit” value=”Calculate”>
</form>
<div id=”result”></div>
</div>
<script>
document.getElementById(‘dateForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();
var startDate = new Date(document.getElementById(‘startDate’).value);
var endDate = new Date(document.getElementById(‘endDate’).value);
var difference = endDate.getTime() – startDate.getTime();
var daysDifference = Math.floor(difference / (1000 * 60 * 60 * 24));
// Difference in years
var startYear = startDate.getFullYear();
var endYear = endDate.getFullYear();
var yearDifference = endYear – startYear;
// Difference in months
var startMonth = startDate.getMonth();
var endMonth = endDate.getMonth();
var monthDifference = endMonth – startMonth;
if (monthDifference < 0) {
yearDifference–;
monthDifference += 12;
}
// Difference in days
var startDay = startDate.getDate();
var endDay = endDate.getDate();
var dayDifference = endDay – startDay;
if (dayDifference < 0) {
monthDifference–;
var startMonthDays = new Date(startYear, startMonth + 1, 0).getDate();
dayDifference += startMonthDays;
}
// Difference in weeks
var weeksDifference = Math.floor(daysDifference / 7);
// Remaining days after removing complete weeks
var remainingDays = daysDifference % 7;
var outputType = document.getElementById(‘outputType’).value;
var result = ”;
switch(outputType) {
case ‘ymd’:
result = ‘Difference: ‘ + yearDifference + ‘ years, ‘ + monthDifference + ‘ months, ‘ + dayDifference + ‘ days’;
break;
case ‘md’:
result = ‘Difference: ‘ + monthDifference + ‘ months, ‘ + dayDifference + ‘ days’;
break;
case ‘wd’:
result = ‘Difference: ‘ + weeksDifference + ‘ weeks, ‘ + remainingDays + ‘ days’;
break;
case ‘td’:
result = ‘Total days: ‘ + daysDifference;
break;
default:
result = ‘Invalid output type’;
}
document.getElementById(‘result’).innerHTML = result;
});
</script>
</body>
</html>