Modern Calendar Date Picker In Vanilla JavaScript

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

Preview:

Modern Calendar Date Picker In Vanilla JavaScript

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

Changelog:

09/12/2020

  • Updated JavaScript to support IE

08/22/2020

  • Removed transition animation

You Might Be Interested In:


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

    Reply

Leave a Reply