Basic Calendar Date Picker In JavaScript – date-picker.js

Preview:

Description:

A basic yet customizable date picker calendar component without any dependencies.

How to use it:

1. Put the stylesheet date-picker.css and JavaScript date-picker.js in the html.

<link rel="stylesheet" href="./src/css/date-picker.css" />
<script src="./src/js/date-picker.js"></script>

2. Code the HTML for the calendar interface.

<div class="container-calendar">
  <div class="button-container-calendar">
    <button id="previous">&#8249;</button>
    <button id="next">&#8250;</button>
    <h3 id="monthHeader"></h3>
    <p id="yearHeader"></p>
  </div>
    
  <table class="table-calendar" id="calendar">
    <thead id="thead-month"></thead>
    <tbody id="calendar-body"></tbody>
  </table>
    
  <div class="footer-container-calendar">
    <label for="month">Jump To: </label>
    <select id="month">
      <option value=0>Jan</option>
      <option value=1>Feb</option>
      <option value=2>Mar</option>
      <option value=3>Apr</option>
      <option value=4>May</option>
      <option value=5>Jun</option>
      <option value=6>Jul</option>
      <option value=7>Aug</option>
      <option value=8>Sep</option>
      <option value=9>Oct</option>
      <option value=10>Nov</option>
      <option value=11>Dec</option>
    </select>
    <select id="year"></select>       
  </div>
</div>

3. Create a container to display the date you picked.

<p id="date-picked"></p>