Lightweight Date Picker & Date Range Picker Component – deskycal

Category: Date & Time , Javascript | July 22, 2022
Views Total:1,435 views
Official Page:Go to website
Last Update:July 22, 2022


Lightweight Date Picker & Date Range Picker Component – deskycal


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" />

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:

  mode = 'double', 
  in_date = null, 
  any_date = false, 
  next_input = null, 
  callback = null



  • scroll error fix

You Might Be Interested In:

Leave a Reply