Lightweight Date Picker & Date Range Picker Component – deskycal

Preview:

Description:

I’m excited to share with you an innovative lightweight date picker component I found on the web. If you need a date picker on your website that can also handle date ranges, and you’re willing to forego Bootstrap (or something similar), then this is the right picker for you!

deskycal is a fully responsive and highly customizable date picker/date range picker component created in vanilla JavaScript. Compact, lightweight, supports localization, and has no dependencies. It uses no frameworks like jQuery or Zepto, but only the native DOM methods.

How to use it:

1. Download and load the deskycal’s JavaScript and CSS files.

<link rel="stylesheet" href="css/deskyCal.css" />
<script src="dist/desky_cal.min.js"></script>

2. Initialize the date picker on a trigger element and done. This trigger element can be any DOM element like input, image, button, etc.

<input id="basic" />

initDeskyCalendar("basic");

3. Enable the Compack mode.

initDeskyCalendar("basic", "single");

4. Set the initial date.

initDeskyCalendar("basic", "single", Date.parse('24 Dec 2022 00:12:00 GMT'));

5. It also allows Any Date.

initDeskyCalendar("basic", "single", null, true)

6. Create a date range picker that consists of two date pickers.

<input id="start" />
<input id="end" />

initDeskyCalendar("start", "single", null, null, "end");
initDeskyCalendar("end", "single");

7. Disable Before or After Date.

initDeskyCalendar("basic", "single", null, null, null, new Date(), new Date());

8. Determine whether to auto scroll the date picker into view. Default: false.

initDeskyCalendar("basic", "single", null, null, null, null, null, true);

9. Trigger a function when the date changes.

initDeskyCalendar("callback", "double", null, null, null, null, null, null, call_back_function);
function call_back_function(d) {
  // do something
}

10. All default parameters:

initDeskyCalendar(
  id, 
  mode = 'double', 
  in_date = null, 
  any_date = false, 
  next_input = null, 
  disabled_before=null, 
  disabled_after=null, 
  scroll=false, 
  callback = null
)

Changelog:

10/01/204

• bugfix

09/23/204

• fix contenteditable bug

07/22/2022

• scroll error fix