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

Category: Date & Time , Javascript | April 29, 2020
Author: Lizaam
Views Total: 3,898 views
Official Page: Go to website
Last Update: April 29, 2020
License: MIT

Preview:

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

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>

You Might Be Interested In:


4 thoughts on “Basic Calendar Date Picker In JavaScript – date-picker.js

  1. Ejaz

    Hello,

    I have used this Basic Calendar in my application but i am getting error please help me out thanks….

    Error:
    CustomControlSite.cpp, 1051, Unable to set property ‘innerHTML’ of undefined or null reference (0x80040008)
    My sample application: date-picker.js, 29, Unable to set property ‘innerHTML’ of undefined or null reference (0x80040008)

    Reply
    1. Henlo

      Hello, this error is typical if you not applied the following html code shown in description.
      JS need this html elements to display the calendar data and styling.

      Reply

Leave a Reply