Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

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:

2. Add Your Input

Create an input field:

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!

The above is the detailed content of Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution. For more information, please follow other related articles on the PHP Chinese website!