DateJust.js

DatePicker

DateJust.js is a JavaScript component for calendars. It has powerful controls: drag to select multiple days, and scroll to change month.

DateJust

It doesn't have any dependencies.

The library can be found on GitHub as can the documentation.

And some examples can be seen below.

If you are familar with Google calendar, you may recognise these interactions from its datepicker (small calendar left of the main diary).

Google datepicker

I love the ease and speed in which multiple days can be selected. And the efficiency of using a mouse wheel / trackpad todo something other than scroll content up or down is somewhat refreshing.

Having (unsuccessfully) looked for an existing library, I decided to build my own!

Hence DateJust.js was born...

Big thanks to CommuSoft where I built version 0.1.0

Example #1

Result
HTML

<div id="example-one"></div>

JS

exampleOne = new DateJust("#example-one", {
  onDateSelected: function(date) {
    console.log(date);
  },
  onDateRangeSelected: function(startDate, endDate) {
    console.log(startDate + " – " + endDate);
  }
});

Example #2

Result
HTML

<div id="example-two"></div>

JS

exampleTwo = new DateJust("#example-two", {
  minDate: new Date(2012, 11, 8),
  maxDate: new Date(2014, 11, 8),
  existingDate: new Date(2014, 11, 8),
  onDateSelected: function(date) {
    console.log(date);
  },
  onDateRangeSelected: function(startDate, endDate) {
    console.log(startDate + " – " + endDate);
  }
});

Example #3

Result
HTML

<div id="example-three"></div>

JS

exampleThree = new DateJust("#example-three", {
  existingDateRange: [new Date(2016, 11, 8), new Date(2016, 11, 25)],
  onDateSelected: function(date) {
    console.log(date);
  },
  onDateRangeSelected: function(startDate, endDate) {
    console.log(startDate + " – " + endDate);
  }
});

P.S. You can find the source and docs on GitHub. And did you know DateJust.js has a bigger brother DateRange.js.