Beautiful Pure JavaScript Date Picker With Events Support – Datepickk.js

Preview:

Description:

Datepickk.js is a JavaScript library which allows you select a date or date range from a date picker popup or inline calendar, with support for custom events.

How to use it:

Include the stylesheet datepickk.min.css and JavaScript file datepickk.min.js on the webpage.

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

Initialize the date picker and we’re ready to go.

var datepicker = new Datepickk();

Show a default date picker on the webpage.

datepicker.show();

Available options to customize the date picker.

// Allows to select a range of two dates
datepicker.range = false;
datepicker.maxSelections = null;
// Displays the date picker into a specific container
datepicker.container = document.body;
datepicker.opened = false;
// Displays multiple months at once
datepicker.months = 1;
// If a date gets selected the datepicker will close
datepicker.closeOnSelect = false;
datepicker.button = null;
datepicker.title = null;
// Callbacks
datepicker.onClose = null;
datepicker.onConfirm = null;
datepicker.onSelect = null;
// If someone clicks outside the datepicker it closes
datepicker.closeOnClick = true;
// Inline mode
datepicker.inline = false;
// You can change the language and the day the week starts by changing the lang property.
// By default i've added 3 languages: English (en), Norwegian (no), German (de). 
// Add your own languages to the 'languages' property in the source code
datepicker.lang = 'en';
// You can disable spesific days
datepicker.disabledDates = [];
datepicker.disabledDays = [];
// Allows to mark stuff in the date picker
datepicker.highlight = [];
// Mark tooltips
datepicker.tooltips = {};
// Show/hide daynames line
datepicker.daynames = true;
datepicker.today = true;
// Show little line on todays date
datepicker.startDate = null;
datepicker.minDate = null;
datepicker.maxDate = null;
// Locks the datepicker (viewonlymode)
datepicker.locked = false;

API.

// shows date picker
datepicker.show();
// hides date picker
datepicker.hide();
// selects a date
datepicker.selectDate(new Date());
// unselects a date
datepicker.unselectDate(new Date());
// unselect all
datepicker.unselectAll();

Changelog:

08/14/2018

• fix(es6 import): adding support for es6 imports + switching to webpack