Pikaday – A refreshing JavaScript Datepicker


With Pikaday you will get a vanilla, dependency-less and lightweight DatePicker interface and widget. The script is compatible with 7+, 3+, 3.5+, 8+, 10.6+ and can optionally also work with the DateTime function library moment.js. It can be used as AMD, UMD or nodeJS module as well as default browser extension.

The library is still maintained and “ready for Production”. Pikaday is a simple and only DatePicker script, if you want to select Times too please check out this Pull Request!

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

bower install pickaday --save


The package itself contains the default JavaScript file as well as a default Stylesheet. A additional jQuery bindings file is also available! All files are only unminified / uncompressed!


Load Pikaday

Just load the main stylesheet within the HTML Header of your HTML Document and link the JavaScript file. We recommend to embed the Script directly after the opened <body> tag. If you want to use the jQuery bindings too, then include the respective file AFTER the main Pikaday script!

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


Configure Pikaday

The script comes with many settings and options, which configures the behavior and the design too. It offers also many methods and callbacks, you should visit the official GitHub repository for more informations!

document.addEventListener("DOMContentLoaded", {
    var picker = new Pikaday({
        field:                  null,
        trigger:                undefined,
        bound:                  undefined,
        ariaLabel:              'Use the arrow keys to pick a date',
        position:               'bottom left',
        reposition:             true,
        container:              undefined,
        format:                 'YYYY-MM-DD',
        formatStrict:           false,
        toString:               null,
        parse:                  null,
        defaultDate:            null,
        setDefaultDate:         false,
        firstDay:               0,
        minDate:                null,
        maxDate:                null,
        disableWeekends:        false,
        disableDayFn:           undefined
        yearRange:              10,
        showWeekNumber:         false,
        pickWholeWeek:          false,
        isRTL:                  false,
        i18n: {
            previousMonth:  'Previous Month',
            nextMonth:      'Next Month',
            months:         [
                'January', 'February', 'March', 'April', 'May', 'June', 'July', 
                'August', 'September', 'October', 'November', 'December'
            weekdays:       [
                'Sunday', 'Monday', 'Tuesday', 'Wednesday',
                'Thursday', 'Friday', 'Saturday'
            weekdaysShort:  [
                'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
        yearSuffix:             '',
        showMonthAfterYear:     false,
        showDaysInNextAndPreviousMonths: false,
        enableSelectionDaysInNextAndPreviousMonths: false,
        numberOfMonths:         1,
        mainCalendar:           'left',
        events:                 [],
        theme:                  null,
        blurFieldOnSelect:      true,
        onSelect:               null,
        onOpen:                 null,
        onClose:                null,
        onDraw:                 null,
        keyboardInput:          true


Configure: Options

Bind the datepicker to a form field.
Use a different element to trigger opening the datepicker.
Automatically show/hide the datepicker on field focus.
Data-attribute on the input field with an aria assistance tekst (only applied when bound is set).
Preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example.
Can be set to false to not reposition datepicker within the viewport, forcing it to take the configured.
DOM node to render calendar into.
Tthe default output format for .toString() and field value (requires Moment.js for custom formatting).
The default flag for moment’s strict date parsing (requires Moment.js for custom formatting).
toString(date, format)
Function which will be used for custom formatting. This function will take precedence over moment.
parse(dateString, format)
Function which will be used for parsing input string and getting a date object from it. This function will take precedence over moment.
The initial date to view when first opened.
Make the defaultDate the initial selected value.
First day of the week (0: Sunday, 1: Monday, etc).
The minimum/earliest date that can be selected (this should be a native Date object – e.g. new Date() or moment().toDate()).
The maximum/latest date that can be selected (this should be a native Date object – e.g. new Date() or moment().toDate()).
Disallow selection of Saturdays or Sundays.
Callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
Number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015]).
Show the ISO week number at the head of the row.
Select a whole week instead of a day.
Reverse the calendar for right-to-left languages.
Language defaults for month and weekday names.
Additional text to append to the year in the title
Render the month after year in the title.
Render days of the calendar grid that fall in the next or previous month.
Allows user to select date that is in the next or previous months.
Number of visible calendars.
When numberOfMonths is used, this will help you to choose where the main calendar will be (default left, can be set to right). Only used for the first display or when a selected date is not already visible.
Array of dates that you would like to differentiate from regular days.
Define a classname that can be used as a hook for styling different themes.
Defines if the field is blurred when a date is selected.
Callback function for when a date is selected.
Callback function for when the picker becomes visible.
Callback function for when the picker is hidden.
Callback function for when the picker draws a new month.
Enable keyboard input support.

Leave a Reply