Pikaday – A refreshing JavaScript Datepicker

Pickaday

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

Instructions

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

 

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

field
Bind the datepicker to a form field.
trigger
Use a different element to trigger opening the datepicker.
bound
Automatically show/hide the datepicker on field focus.
ariaLabel
Data-attribute on the input field with an aria assistance tekst (only applied when bound is set).
position
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.
reposition
Can be set to false to not reposition datepicker within the viewport, forcing it to take the configured.
container
DOM node to render calendar into.
format
Tthe default output format for .toString() and field value (requires Moment.js for custom formatting).
formatStrict
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.
defaultDate
The initial date to view when first opened.
setDefaultDate
Make the defaultDate the initial selected value.
firstDay
First day of the week (0: Sunday, 1: Monday, etc).
minDate
The minimum/earliest date that can be selected (this should be a native Date object – e.g. new Date() or moment().toDate()).
maxDate
The maximum/latest date that can be selected (this should be a native Date object – e.g. new Date() or moment().toDate()).
disableWeekends
Disallow selection of Saturdays or Sundays.
disableDayFn
Callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
yearRange
Number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015]).
showWeekNumber
Show the ISO week number at the head of the row.
pickWholeWeek
Select a whole week instead of a day.
isRTL
Reverse the calendar for right-to-left languages.
i18n
Language defaults for month and weekday names.
yearSuffix
Additional text to append to the year in the title
showMonthAfterYear
Render the month after year in the title.
showDaysInNextAndPreviousMonths
Render days of the calendar grid that fall in the next or previous month.
enableSelectionDaysInNextAndPreviousMonths
Allows user to select date that is in the next or previous months.
numberOfMonths
Number of visible calendars.
mainCalendar
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.
events
Array of dates that you would like to differentiate from regular days.
theme
Define a classname that can be used as a hook for styling different themes.
blueFieldOnSelect
Defines if the field is blurred when a date is selected.
onSelect
Callback function for when a date is selected.
onOpen
Callback function for when the picker becomes visible.
onClose
Callback function for when the picker is hidden.
onDraw
Callback function for when the picker draws a new month.
keyboardInput
Enable keyboard input support.

Leave a Reply

Top