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="CalendarPicker.style.css" />
<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.

myCalender.value

5. Get the selected day.

myCalender.value.getDay();

6. Prase the value to a date string.

myCalender.value.toDateString();

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) 
});

Download Details:

Author: MathiasWP

Demo: https://mathiaspicker.com/CalendarPickerJS/

Source Code: https://github.com/MathiasWP/CalendarPickerJS

#javascript