Basic Date Picker For Input Field – datepicker.js

Category: Date & Time , Javascript | November 18, 2018
Views Total:3,463 views
Official Page:Go to website
Last Update:November 18, 2018


Basic Date Picker For Input Field – datepicker.js


This is a super simple JavaScript library that appends a minimal, clean date picker to the input field using pure JavaScript with no dependencies.

How to use it:

Create a normal text input for the date picker.

<input type="text" class="datepicker"/>

Put the JavaScript file ‘datepicker.js’ at the bottom of the webpage.

<script src="datepicker.js"></script>

That’s it. Apply your custom CSS styles to the date picker.

.dropdown {
  position: absolute;
  line-height: 20px;
  font-size: 12px;
  width: 140px;
  display: none;
  background: #f6f6f6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
a.previous,, .days a {
  cursor: pointer;
  text-align: center;
  display: inline-block;
  width: 20px;
.selected {
  font-weight: bold;
  background: #8a46ff;
  color: #ffffff;
input.datepicker:focus + div.dropdown { display: block; }
input.datepicker:focus + div.dropdown, div.dropdown:hover { display: block; }



  • fixed for IE 11


  • fixed init month with 2 digits

You Might Be Interested In:

One thought on “Basic Date Picker For Input Field – datepicker.js

  1. marti12

    Nice and very simple but why calendar doesn’t appear in mobile?


Leave a Reply