datepickr – The DoIt Yourself DatePicker

DatePickr

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

Instructions

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

 

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

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

Leave a Reply

Top