Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

Daniele Rugginenti — Sun, 22 Sep 2024 23:10:53 +0000

Looking to enhance your forms without the fluff? Meet DeskyCalendar, a minimalist, responsive date picker crafted in pure vanilla JavaScript. It's designed to add style and functionality to your date selection process without weighing down your project.

Demo and project page

demo page -> https://danruggi.github.io/datepicker/
project link -> https://github.com/danruggi/datepicker

Key Features

📳 Full Responsive: Looks great on any device—no more squished calendars.
🌱 Double / Single Format: Choose between selecting a single date or a range with ease.
🍀 Add "Any Date" Option: Allow users the freedom to select any date, perfect for filters and reports.
🔒 Disable Dates: Prevent selections for past or future dates, keeping everything in check.
📎 Execute External Function on Click: Want to trigger a custom action when a date is selected? Easy peasy!
Quick Setup

1. Include CSS and JS

Just drop these links into your HTML:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/danruggi/datepicker/css/deskyCal.css' onload="this.media='all'"> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/danruggi/datepicker/js/deskyCal.js"></script>

2. Add Your Input

Create an input field:

<input id='myID'>

3. Initialize the Calendar

Set it up with a simple line of JavaScript:

new DeskyCalendar({'myID': {}});

Minimal Examples

Two Columns

Easily switch to a double date selection:

new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

Disable Dates

Want to restrict dates? Just add

const d = new Date(); new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}}); Conclusion

With just a couple of lines, DeskyCalendar brings sophistication and simplicity to your date selection needs, all while being lightweight and efficient. It’s time to level up your forms with this elegant solution. Happy coding!

DEV Community: Daniele Rugginenti