datepickr – A simple JavaScript DatePicker

datepickr

The – since 2014 – unmaintained datepickr JavaScript offers a neat and designable DatePicker interface for your Input Form Fields. It is compatible with all modern, and not so modern, Browsers including the 7, but it may also work for 6. The script is really simple but still powerful and lightweight (with just 6KB minified)! datepickr doesn’t require any external dependencies and is written in plain vanilla JavaScript.

The latest release is 4 years ago and the Repository isn’t maintained anymore. But it still works and it’s a perfect base for your own DatePicker fork.

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

Instructions

The package itself contains the main JavaScript file as well as a respective demonstration Stylesheet. Both files are also available in respective minified versions.

 

Load datepickr

It is recommended to load the Stylesheet within your HTML header. The JavaScript can be located wherever you want, we prefer to link this file 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.js"></script>
    </body>
</html>

 

Configure datepickr

The Script allows a complete localization and currently supports 6 different options.

document.addEventListener("DOMContentLoaded", {
    // Localization (German Example)
    datepickr.prototype.l10n.weekdays.shorthand = [
        "SO", "MO", "DI", "MI", "DO", "FR", "SA"
    ];
    datepickr.prototype.l10n.weekdays.longhand = [
        "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"
    ];
    datepickr.prototype.l10n.month.shorthand = [
        "JAN", "FEB", "MÄR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OKT", "NOV", "DEZ"
    ];
    datepickr.prototype.l10n.month.longhand = [
        "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli",
        "August", "September", "Oktober", "November", "Dezember"
    ];
    datepickr.prototype.l10n.daysInMonth = [
        31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
    ];
    datepickr.prototype.l10n.firstDayOfWeek = 1;
    
    // Configuration
    datepick(".webscripts-dates", {
        dateFormat:             "F j, Y",
        altInput:               null,
        altFormat:              null,
        minDate:                null,
        maxDate:                null,
        shorthandCurrentMonth:  false
    })
});

 

Configure: Options

dateFormat
A string of characters which are used to define how the date will be displayed in the input box. Very similar to the PHP date function, but with less options. The supported characters are defined below.
altInput
A reference to another input element. This can be useful if you want to show the user a readable date, but return something totally different to the server.
altFormat
Exactly the same as date format, but for the altInput field
minDate
The minimum date that a user can start picking from, as a JavaScript timestamp. The developer recommend to using .getTime().
maxDate
The maximum date that a user can pick from, as a JavaScript timestamp. The developer recommend to using .getTime().
shorthandCurrentMonth
Show the month using the shorthand version. I don’t know if this is very useful, but maybe?

One thought on “datepickr – A simple JavaScript DatePicker

Leave a Reply

Top