- Lightweight (less than 5kb minified and gzipped)
- No dependencies (but plays well with Moment.js)
- Modular CSS classes for easy styling
Production ready? Since version 1.0.0 Pikaday is stable and used in production. If you do however find bugs or have feature requests please submit them to the GitHub issue tracker.
Also see the changelog
Pikaday can be bound to an input field:
If you're using jQuery make sure to pass only the first element:
var picker = field: $'#datepicker'0 ;
If the Pikaday instance is not bound to a field you can append the element anywhere:
var field = documentgetElementById'datepicker';var picker =fieldvalue = pickertoString;;fieldparentNodeinsertBeforepickerel fieldnextSibling;
As the examples demonstrate above Pikaday has many useful options:
fieldbind the datepicker to a form field
triggeruse a different element to trigger opening the datepicker, see trigger example (default to
boundautomatically show/hide the datepicker on
positionpreferred position of the datepicker relative to the form field, e.g.:
bottom rightNote: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left')
repositioncan be set to false to not reposition datepicker within the viewport, forcing it to take the configured
containerDOM node to render calendar into, see container example (default: undefined)
formatthe default output format for
fieldvalue (requires Moment.js for custom formatting)
defaultDatethe initial date to view when first opened
defaultDatethe initial selected value
firstDayfirst day of the week (0: Sunday, 1: Monday, etc)
minDatethe minimum/earliest date that can be selected (this should be a native Date object - e.g.
maxDatethe maximum/latest date that can be selected (this should be a native Date object - e.g.
disableWeekendsdisallow selection of Saturdays or Sundays
disableDayFncallback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
yearRangenumber of years either side (e.g.
10) or array of upper/lower range (e.g.
showWeekNumbershow the ISO week number at the head of the row (default
isRTLreverse the calendar for right-to-left languages
i18nlanguage defaults for month and weekday names (see internationalization below)
yearSuffixadditional text to append to the year in the title
showMonthAfterYearrender the month after year in the title (default
numberOfMonthsnumber of visible calendars
numberOfMonthsis 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
onSelectcallback function for when a date is selected
onOpencallback function for when the picker becomes visible
onClosecallback function for when the picker is hidden
onDrawcallback function for when the picker draws a new month
The normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see
plugins/pikaday.jquery.js in the repository). This version requires jQuery, naturally, and can be used like other plugins:
See the jQuery example for a full version.
If you use a modular script loader than Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module.
See the AMD example for a full version.
require'pikaday'var picker = field: documentgetElementById'datepicker' ;;
The same applies for the jQuery plugin mentioned above.
See the jQuery AMD example for a full version.
If you use a CommonJS compatible environment you can use the require function to import Pikaday.
var pikaday = require'pikaday';
browserify main.js -o bundle.js -i moment
If you're using Ruby on Rails, make sure to check out the Pikaday gem.
You can control the date picker after creation:
var picker = field: documentgetElementById'datepicker' ;
Date object of the selected day, or
null if no selection.
Set the current selection. This will be restricted within the bounds of
maxDate options if they're specified. You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect callback (true), allowing the date to be set silently.
Returns a Moment.js object for the selected date (Moment must be loaded before Pikaday).
picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))
Set the current selection with a Moment.js object (see
setDate for details).
picker.gotoDate(new Date(2014, 1))
Change the current view to see a specific date. This example will jump to February 2014 (month is a zero-based index).
Change the current view by month (0: January, 1: Februrary, etc).
Go to the next or previous month (this will change year if necessary).
Change the year being viewed.
Update the minimum/earliest date that can be selected.
Update the maximum/latest date that can be selected.
Make the picker visible.
Recalculate and change the position of the picker.
Hide the picker making it invisible.
Hide the picker and remove all event listeners — no going back!
i18n configuration format looks like this:
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'
You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the
firstDay option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set
true for languages that are read right-to-left.
You can use the work @owenmead did most recently at owenmead/Pikaday
A more simple time selection approach done by @xeeali at xeeali/Pikaday is based on version 1.2.0.
Also @stas has a fork stas/Pikaday, but is now quite old
- IE 7+
- Chrome 8+
- Firefox 3.5+
- Safari 3+
- Opera 10.6+
Thanks to @shoogledesigns for the name.
Copyright © 2014 David Bushell | BSD & MIT license