Simple Datepicker Calendar In Vanilla JavaScript – Datepicker.js

Category: Date & Time , Javascript | March 12, 2019
Author: TheOfficialSimon
Views Total: 702
Official Page: Go to website
Last Update: March 12, 2019
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({
  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)

You Might Be Interested In:


One thought 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

Leave a Reply