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

Category: Date & Time , Javascript | April 29, 2020
Author:Lizaam
Views Total:2,694 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:


3 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

Leave a Reply