Modern Calendar Date Picker In Vanilla JavaScript

Category: Date & Time , Javascript | December 12, 2020
Author: MathiasWP
Views Total: 3,592 views
Official Page: Go to website
Last Update: December 12, 2020
License: MIT


Modern Calendar Date Picker In Vanilla JavaScript


A simple yet modern and user-friendly date picker with a monthly calendar.

How to use it:

1. Add the Calendar Date Picker’s files to the webpage.

<link rel="stylesheet" href="" />
<script src="CalendarPicker.js"></script>

2. Create a container for the calendar.

<div id="myCalendarWrapper"></div>

3. Initialize the calendar date picker.

const myCalender = new CalendarPicker('#myCalendarWrapper', {
      // options here

4. Get the selected date.


5. Get the selected day.


6. Prase the value to a date string.


7. Set the min/max dates. If max < min or min > max then the only available day will be today.

const nextYear = new Date().getFullYear() + 1;
const myCalender = new CalendarPicker('#myCalendarWrapper', {
      min: new Date(),
      max: new Date(nextYear, 10) 



  • Added polyfill + removed template strings for true IE support


  • Updated JavaScript to support IE


  • Removed transition animation

You Might Be Interested In:

2 thoughts on “Modern Calendar Date Picker In Vanilla JavaScript

  1. Stefano

    Bellissimo! purtroppo non funziona su MS Explorer 7/8/9/10/11 e legacy Edge (v.1) :((( Puoi aggiornare il problema sul DOM? GRAZIE 1000!

    Very beautifull! unfortunately it doesn’t work on MS Explorer 7/8/9/10/11 and Legacy Edge…: (((Can you update the problem on the DOM? THANKS 1000!


Leave a Reply