Simple Datepicker Calendar In Vanilla JavaScript – Datepicker.js

Preview:

Description:

A simple, lightweight, configurable date picker that works with the input field and is written in pure JavaScript/CSS.

See also:

• Top 10 JavaScript & CSS Date And Timer Picker Components

How to use it:

To use the date picker, include the stylesheet datepicker.css and JavaScript datepicker.js on the page.

<!-- Datepicker.css -->
<link rel="stylesheet" href="datepicker.css">

<!-- Datepicker.js -->
<script src="datepicker.js"></script>

Initialize the date picker on an input field.

<input type="text" id="datepicker" autocomplete="off"></input>

const instance = new Datepicker(document.getElementById("datepicker"));

Specify the first & last dates.

instance.config({
  firstdate: new Date(2019, 0, 1), // 01/01/2019
  lastdate: new Date(2019, 11, 31) // 12/31/2019
});

Enable/disable dates on the calendar.

instance.config({
  disableddays: instance => { return (instance.getDay() > 0 && instance.getDay() < 6); }
});

Format the output date.

instance.config({
  format: instance => { return (months_short[instance.getMonth()] + " " + instance.getDate()); }
});

Get the date selection.

instance.getDate();

Changelog:

03/12/2019

• Fixed the header not being centered

03/08/2019

• Added month picker (click the month name)