datepickr – The DoIt Yourself DatePicker


The datepickr by Tristen is a lightweight and simple DatePicker with no dependencies. It is a fork of Josh Salverdas deprecated datepickr script and still compatible with all modern browsers, including 8+! The script is also usable as AMD, UMD and nodeJS module as well as plain Browser extension.

The main goal of this datepickr version is to just Do It Yourself, therefore it just takes care of itself. It doesn’t binds itself to an Input field and doesn’t formates dates or anything else. This Script is more suitable for developers, and less for users.

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

npm i datepickr --save

yarn add datepickr --save

bower install datepickr --save


The package itself contains the main JavaScript file, which should also be available as normal edition. Unfortunately both files (so datepickr.js and datepickr.min.js) are minified. However, the Stylesheet is only available as uncompressed version!


Load datepickr

Just link the CSS Stylesheet within the Header of your HTML Document. The JavaScript file should be included directly after the opened <body> tag.

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


Configure datepickr

The script itself offers 14 configurations to adapt the behavior and translate the respective strings. The constructor allows just a single element as first parameter. The second parameter should be a callback function, which receives the selected dates as [timestamp, full] arrays. And the last parameter should be an obect with the respective options, which are listed below.

document.addEventListener("DOMContentLoaded", {
    var element = document.querySelector("input.datetime-pickr");
    var pickr = new Datepickr(element, function(result){
    }, {
        weekdays:           [
            "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"
        months:             [
            "January", "February", "March", "April", "May", "June", "July", 
            "August", "September", "October", "November", "December"
        startYear:          new Date().getFullYear(),
        startMonth:         new Date().getMonth(),
        minDate:            null,
        maxDate:            null,
        halfDay:            false,
        omitPast:           false,
        omitFuture:         false,
        omitWeekends:       false,
        omitDays:           [],
        activeDays:         [],
        utc:                false,
        singleSelection:    false,


Configure: Options

Option for translation
Option for translation
Start the date picker on a particular year
Start the date picker on a particular month
A timestamp representing a maximum date the pager should page
A timestamp representing a minimum date the pager should page
Enables halfday selection of dates
Prevent selecting days in the past
Prevent selecting days in the future
Prevent selecting weekends
Pass a timestamp array of dates to prevent the selection of
Pass an array of arrayed dates ie. [[[1413950400000,1],[1414468800000,0.5] that are auto selected on load
Should date output be interpreted as UTC
Limit days selection to one day.

Leave a Reply