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

Category: Date & Time , Javascript , Recommended | August 14, 2018
Author: crsten
Views Total: 6,260
Official Page: Go to website
Last Update: August 14, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:

Leave a Reply