Basic Date Picker For Input Field – datepicker.js

Category: Date & Time , Javascript | November 18, 2018
Author: ZPavel
Views Total: 2,123
Official Page: Go to website
Last Update: November 18, 2018
License: MIT

Preview:

Basic Date Picker For Input Field – datepicker.js

Description:

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, a.next, .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; }

Changelog:

11/18/2018

  • fixed for IE 11

10/21/2018

  • 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?

    Reply

Leave a Reply