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!
Top comments (0)