Simple Datepicker Calendar In Vanilla JavaScript – Datepicker.js

Category: Date & Time , Javascript | August 4, 2020
Author:NomisIV
Views Total:20,086 views
Official Page:Go to website
Last Update:August 4, 2020
License:MIT

Preview:

Simple Datepicker Calendar In Vanilla JavaScript – Datepicker.js

Description:

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

See also:

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)

You Might Be Interested In:


4 thoughts on “Simple Datepicker Calendar In Vanilla JavaScript – Datepicker.js

  1. Glenn Regis

    Hi, How can I make the month format two digit (mm)? For instance currently February comes out as 2 instead of 02.

    Reply
  2. Tom

    Can two instances be put on one page, ie an input for initial date and an input for last date?

    Reply
    1. JonV

      @Tom – this worked for me:

      Birthdate

      Birthdate2

      const elem = document.getElementById(‘foo’);
      const datepicker = new Datepicker(elem, {
      // …options
      });

      const elem2 = document.getElementById(‘foo2’);
      const datepicker2 = new Datepicker(elem2, {
      // …options
      });

      Reply
  3. JonV

    Oops – the HTML in my first response was rendered – here is another try:
    <–
    Birthdate

    Birthdate2

    –>

    Reply

Leave a Reply