Modern Calendar Date Picker In Vanilla JavaScript

Preview:

Description:

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

8. Determine whether to show short week days to fit small screens.

const myCalender = new CalendarPicker('#myCalendarWrapper', {
      showShortWeekdays: true
});

Changelog:

06/22/2022

• Add option showShortWeekdays to make it possible to fit calendar on smaller (mobile) screens

12/12/2020

• Added polyfill + removed template strings for true IE support

09/12/2020

• Updated JavaScript to support IE

08/22/2020

• Removed transition animation