I found a question that interests me and a solution to it is here on this link: https://stackoverflow.com/a/51660131/17222337, but it's in jQuery, but I'm interested in a pure javascript solution. I reviewed what I could do, but found only non working code on this topic in pure javascript. I tried to translate from jQuery into javascript, but the code I get is wrong and does not work. Tell me please, how to make a javascript code from the given jquery code?
I found solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
}
form span{
display: block;
margin: 20px 0;
}
/*make form styling consistent across browsers*/
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
</style>
</head>
<body>
<form>
<span>
<label for="day">Day:</label>
<select name="day" id="day"></select>
</span>
<span>
<label for="month">Month:</label>
<select name="month" id="month"></select>
</span>
<span>
<label for="year">Year:</label>
<select name="year" id="year">Year:</select>
</span>
</form>
<script>
//Create references to the dropdown's
const yearSelect = document.getElementById("year");
const monthSelect = document.getElementById("month");
const daySelect = document.getElementById("day");
const months = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];
//Months are always the same
(function populateMonths(){
for(let i = 0; i < months.length; i++){
const option = document.createElement('option');
option.textContent = months[i];
monthSelect.appendChild(option);
}
monthSelect.value = "January";
})();
let previousDay;
function populateDays(month){
//Delete all of the children of the day dropdown
//if they do exist
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
//Holds the number of days in the month
let dayNum;
//Get the current year
let year = yearSelect.value;
if(month === 'January' || month === 'March' ||
month === 'May' || month === 'July' || month === 'August'
|| month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June'
|| month === 'September' || month === 'November') {
dayNum = 30;
}else{
//Check for a leap year
if(new Date(year, 1, 29).getMonth() === 1){
dayNum = 29;
}else{
dayNum = 28;
}
}
//Insert the correct days into the day <select>
for(let i = 1; i <= dayNum; i++){
const option = document.createElement("option");
option.textContent = i;
daySelect.appendChild(option);
}
if(previousDay){
daySelect.value = previousDay;
if(daySelect.value === ""){
daySelect.value = previousDay - 1;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 2;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 3;
}
}
}
function populateYears(){
//Get the current year as a number
let year = new Date().getFullYear();
//Make the previous 100 years be an option
for(let i = 0; i < 101; i++){
const option = document.createElement("option");
option.textContent = year - i;
yearSelect.appendChild(option);
}
}
populateDays(monthSelect.value);
populateYears();
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
daySelect.onchange = function() {
previousDay = daySelect.value;
}
</script>
</body>
</html>