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({
  first_date: new Date(2019, 0, 1), // 01/01/2019
  last_date: new Date(2019, 11, 31) // 12/31/2019
});

Specify the initial & enabled dates.

instance.config({
  initial_date: new Date(2002, 08, 04)
  enabled_days: d => {
    return (d.getDay() > 0 && d.getDay() < 6);
  },
});

Customize the first day of the week.

instance.config({
  first_day_of_week: "Sunday"
});

Format the output date.

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

Get/set the date

instance.getDate();
instance.getDate();

Changelog:

08/04/2020

• Multiple datepickers per page
• Cooler CSS
• TypeScript -> cleaner code
• Year view
• Ability to set the initial date
• Ability to change the first day of the month
• Better error checking

02/05/2020

• Fix October 27 2019 duplicate

03/12/2019

• Fixed the header not being centered

03/08/2019

• Added month picker (click the month name)