Datepickk.js – A simple, beautiful and powerful DatePicker


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


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>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/datepickk.css" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/datepickk.min.js"></script>


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

Each time you show the Calendar this date will show up (will use the current date as default)!
The minimum date, which can be selected. (Or null to set no limit at all)
The maximum date, which can be selected. (Or null to set no limit at all)
currentDate / setDate
Selects the current / passed date.
The number of selectable dates.
The number of months which should be shown in the Calendar interface. (It’s recommended to use NOT more than 2 months!)
Shows an additional title above the Calender Picker.
Shows an additional button below the Calender Picker with the passeed button Text.
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.
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.
To select a range of two dates.
Use an own container, if you don’t want to open the Calendar as modal fullscreen interface.
If you set a container and set inline true it will always be visible and you don’t need to show it first.
If a date gets selected the datepicker will close.
If someone clicks outside the datepicker it closes.
An Array with one or more {date: new Date(), text: "tooltip"} objects to show the respective tooltips on the passed dates.
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.
The disabled days (Sonday as 0, Saturday as 6) as single integer or multiple within an array.
The respective date ranges within an array you want to disable.
This option will show / hide a little line on the current (today) date.
This option will show / hide the respective daynames.
Resize the Calendar Interface to the full screen.
This option will (un)lock the Calendar (ViewOnly Mode).

Leave a Reply