Datepickk.js – A simple, beautiful and powerful DatePicker

Datepickk.js

Create a beautiful and powerul (Modal) Date Picker Interface with Datepickk.js, a pure vanilla JavaScript library. It is compatible with 31+, 31+ and 10+ and usable as AMD, UMD and nodeJS module. The script is also prepared for the Webpack Module bundler.

Datepickk.js is currently available in 5 languages (English (en), Norwegian (no), German (de), Swedish (se), Russian (ru)) and has many options and configurations. You can set up a minimum/maximum date, disable some date(s) (range) and highlight specific dates. The script also supports custom tooltips and can also injected as inline container element within your page!

Download the latest version of Datepickk.js as .ZIP or as .TAR package!

npm i datepickk --save

yarn add datepickk --save

bower install datepickk --save

Instructions

The package itself contains the main JavaScript file as well as the main Stylesheet, both are also available in minified versions too.

 

Load Datepickk.js

It’s recommended to include the respective Stylesheet directly within the header of your HTML document. The JavaScript should be included immediately after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/datepickk.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/datepickk.min.js"></script>
    </body>
</html>

 

Configure Datepickk.js

The current version of the script itself currently offers 24 different settings to configure the behavior and the design of the Date Picker.

document.addEventListener("DOMContentLoaded", {
    startDate:      null,
    minDate:        null,
    maxDate:        null,
    currentDate:    null,
    setDate:        null,       // Alias for currentDate
    maxSelection:   null,
    months:         1,
    title:          null,
    button:         null,
    lang:           "en",
    weekStart:      null,
    range:          false,
    container:      document.body,
    inline:         false,
    closeOnSelect:  false,
    closeOnClick:   true,
    tooltips:       {},
    highlight:      [],
    disabledDays:   [],
    disabledDates:  [],
    today:          true,
    daynames:       true,
    fullscreen:     false,
    locked:         false
});

 

Configure: Options

startDate
Each time you show the Calendar this date will show up (will use the current date as default)!
minDate
The minimum date, which can be selected. (Or null to set no limit at all)
maxDate
The maximum date, which can be selected. (Or null to set no limit at all)
currentDate / setDate
Selects the current / passed date.
maxSelection
The number of selectable dates.
months
The number of months which should be shown in the Calendar interface. (It’s recommended to use NOT more than 2 months!)
title
Shows an additional title above the Calender Picker.
button
Shows an additional button below the Calender Picker with the passeed button Text.
lang
You can change the language and the day the week starts by changing the lang property. By default there are 5 languages: English (en), Norwegian (no), German (de), Swedish (se), Russian (ru). Add your own languages to the ‘languages’ property in the source code.
weekStart
You can change when the week should start by setting the weekStart property to a number between 0 – 6 where 0 is sunday and 6 is saturday. The languages have the weekStart predefined. So if you choose norwegian it will automatically start the week on monday if no weekStart has been set.
range
To select a range of two dates.
container
Use an own container, if you don’t want to open the Calendar as modal fullscreen interface.
inline
If you set a container and set inline true it will always be visible and you don’t need to show it first.
closeOnSelect
If a date gets selected the datepicker will close.
closeOnClick
If someone clicks outside the datepicker it closes.
tooltips
An Array with one or more {date: new Date(), text: "tooltip"} objects to show the respective tooltips on the passed dates.
highlight
Pass an Array with one or more {start: new Date(), end: new Date()} (with additional color settings) objects to highlight this respective dates and date ranges.
disabledDays
The disabled days (Sonday as 0, Saturday as 6) as single integer or multiple within an array.
disabledDates
The respective date ranges within an array you want to disable.
today
This option will show / hide a little line on the current (today) date.
daynames
This option will show / hide the respective daynames.
fullscreen
Resize the Calendar Interface to the full screen.
locked
This option will (un)lock the Calendar (ViewOnly Mode).

Leave a Reply

Top