Enhance Your Date Selection with DeskyCalendar: A Simple Vanilla JS Solution

Are you tired of clunky date pickers that clutter your forms? Meet DeskyCalendar, a lightweight and elegant date picker made with pure vanilla JavaScript. It's perfect for anyone looking to elevate their web projects without the hassle of complicated libraries.

Why Choose DeskyCalendar?

• Responsive Design: Whether on a desktop or mobile device, DeskyCalendar looks great everywhere.

• Flexible Formats: Choose between single date selection or a double format for ranges.

• User-Friendly Options: Include features like an "Any Date" button for flexibility and the ability to disable certain dates to prevent past or unwanted selections.

• Lightweight: With a minified size of just 6.3K, it won’t slow down your website.

Getting Started

1. Include the CSS and JS Files

To get started, simply add the following links to 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. Create Your Input Field

Add an input field where you want the calendar to appear:

<input id='myID'>

3. Initialize the Calendar

With just one line of JavaScript, you can bring your calendar to life:

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

Examples to Inspire You

Example 1: Two Columns

Want to allow users to select two dates at once? It’s easy:

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

Example 2: Disable Past Dates

Sometimes, you don’t want users picking dates that have already passed. Here’s how to disable those dates:

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

Example 3: Add "Any Date" Option

Let users choose any date they desire with a simple toggle:

new DeskyCalendar({'calendar_date_selector3': {anyDate: true}});

Explore More

You can see DeskyCalendar in action on the demo page. It's a perfect way to visualize its features and functionality.

If you're curious about the code or want to contribute, check out the project on GitHub.

Conclusion

DeskyCalendar is a fantastic solution for anyone looking to improve their date selection process. With its simplicity, responsiveness, and elegant design, it's perfect for both beginners and seasoned developers. Give it a try and transform the way users interact with dates on your site!

Happy coding! 🎉