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();
    }