Create Year Month & Date dropdown List using JavaScript & JQuery

Create Year Month & Date dropdown List
💡 First, add Font-Awesome style
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </head>
💡 Let’s add JQuery
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js" ></script>
💡 Let’s Create UI part of Year, Month, and Date Dropdown.
<body> <h1>Show a Date Control</h1> <div> <label>Select Date:</label> <div class="input-icons"> <i class="fa fa-calendar icon"></i> <input class="input-field" type="text" placeholder="Select date" id="selectedDateField" readonly /> </div> <div id="dateDropdownDiv"> <select id="yearDropdownField" onchange="onChangeYearAndMonth(this)" ></select> <select id="monthDropdownField" onchange="onChangeYearAndMonth(this)" ></select> <select id="dateDropdownField"></select> <button onclick="onOkClick()">Ok</button> <button onclick="onNowClick()">Now</button> </div> </div> </body>
💡 Let’s put some styles here
<style> .input-icons i { position: absolute; } .input-icons { width: 100%; margin-bottom: 10px; } .icon { padding: 2px; min-width: 40px; } .input-field { width: 15%; padding: 3px; text-align: right; } </style>
💡 Get Fields References using JQuery
const yearDropdownField = $("#yearDropdownField"); const monthDropdownField = $("#monthDropdownField"); const dateDropdownField = $("#dateDropdownField"); const selectedDateField = $("#selectedDateField");
💡 Get Values of input fields using JQuery
const y = yearDropdownField.val(); const m = monthDropdownField.val(); const d = dateDropdownField.val();
💡 Now add window.onload method
We have placed three functions here to populate Year, Month, and Date Select Field.
Initially, we make hidden Date Dropdown Div.
We have added a click event on Read-only Selected Date Input Field
and called the toggle method
on dateDropdownDiv
.
window.onload = function () { populateYearDropdown(); populateMonthDropdown(); populateDateDropdown(); // Initially, we make hidden Date Dropdown Div. $("#dateDropdownDiv").toggle(); // Add click event on selectedDateField and called toggle method on dateDropdownDiv $("#selectedDateField").click(function () { $("#dateDropdownDiv").toggle(); }); };
💡 Now add Function to populate Year dropdown
function populateYearDropdown() { //Determine the Current Year. const currentYear = new Date().getFullYear(); //Loop and add the Year values to DropDownList. for (let i = currentYear; i >= 1950; i--) { const option = document.createElement("OPTION"); option.innerHTML = i; option.value = i; yearDropdownField.append(option); } }
💡 Now add function to populate Month dropdown
function populateMonthDropdown() { const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; //Loop and add the Year values to DropDownList. for (let i = 0; i < monthNames.length; i++) { const option = document.createElement("OPTION"); option.innerHTML = monthNames[i]; option.value = i; monthDropdownField.append(option); } }
💡 Now add function to populate Date Dropdown
function populateDateDropdown() { dateDropdownField.empty(); const year = yearDropdownField.val(); const month = parseInt(monthDropdownField.val()) + 1; //get the last day, so the number of days in that month const days = new Date(year, month, 0).getDate(); //lets create the days of that month for (let d = 1; d <= days; d++) { const option = document.createElement("OPTION"); option.innerHTML = d; option.value = d; dateDropdownField.append(option); } }
💡 If we change the Year or Month dropdown value, the Values of date dropdown should be updated. Let’s add a change event on the Month and Year dropdown.
function onChangeYearAndMonth($event) { this.populateDateDropdown(); }
💡 Let’s add Event on the Ok button
When clicking on Ok button, based on values of the year, month, and date, the complete date should be displayed on the input field.
function onOkClick() { const y = yearDropdownField.val(); const m = monthDropdownField.val(); const d = dateDropdownField.val(); // make date object by passing year, month and date value const date = new Date(y, m, d); // set date object into readonly input field selectedDateField.val(date.toLocaleDateString()); // after set date, hide date dropdown div $("#dateDropdownDiv").hide(); }
💡 Let’s add Event on Now button
When clicking on the Now button, today’s date should be set in all three dropdowns and as well in the input field.
function onNowClick() { const date = new Date(); // get date object // set values yearDropdownField.val(date.getFullYear()); monthDropdownField.val(date.getMonth()); dateDropdownField.val(date.getDate()); // set date value into input field selectedDateField.val(date.toLocaleDateString()); // hide date dropdown div $("#dateDropdownDiv").hide(); }
You can find full Running Code here.
https://stackblitz.com/edit/create-year-month-date-dropdown-list-with-javascript?file=index.html
💡 HTML AND CSS
✔ HTML Form with Pure CSS & JavaScript | Custom Radio and Checkbox
✔ Top 40 Awesome CSS Interview Questions & Answers You should know | CSS Tutorial
✔ HTML advance Interview Questions and Answers for Experienced – Part 1
💡 JAVASCRIPT INTERVIEW QUESTIONS
✔ JavaScript Top Interview questions & Answers You should know
✔ JavaScript Interview Questions & Answers for Experienced – Part 2
✔ JavaScript Interview Question to Write Programs for Experienced – Part 1
✔ JavaScript Interview Questions & Answers for Experienced – Part 1
✔ Top Interview Questions and Answer of HTML 5 Canvas
✔ JavaScript Console Interview Questions | Input Output Program
✔ JavaScript Hoisting Interview Questions & Answers | Console Programs
Create Year Month & Date dropdown List