- 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:
<input type="text" id="datepicker">
Add the JavaScript to the end of your document:
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
If you're using jQuery make sure to pass only the first element:
var picker = new Pikaday({ field: $('#datepicker')[0] });
If the Pikaday instance is not bound to a field you can append the element anywhere:
var field = document.getElementById('datepicker');
var picker = new Pikaday({
onSelect: function(date) {
field.value = picker.toString();
}
});
field.parentNode.insertBefore(picker.el, field.nextSibling);
For advanced formatting load Moment.js prior to Pikaday:
See the moment.js example for a full version.
<input type="text" id="datepicker" value="9 Oct 2014">
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
</script>
As the examples demonstrate above Pikaday has many useful options:
field
bind the datepicker to a form fieldtrigger
use a different element to trigger opening the datepicker, see trigger example (default tofield
)bound
automatically show/hide the datepicker onfield
focus (defaulttrue
iffield
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 (default to 'bottom left')format
the default output format for.toString()
andfield
value (requires Moment.js for custom formatting)inputFormats
optional array of allowed input formats forfield
value and.setDate()
with string (requires Moment.js for custom parsing). Note: The default outputformat
will be added toinputFormats
if not already included. See the moment.js example for example usage.defaultDate
the initial date to view when first opened (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)setDefaultDate
make thedefaultDate
the initial selected valuefirstDay
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()
ormoment().toDate()
)maxDate
the maximum/latest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)yearRange
number of years either side (e.g.10
) or array of upper/lower range (e.g.[1900,2015]
)isRTL
reverse the calendar for right-to-left languagesi18n
language defaults for month and weekday names (see internationalization below)yearSuffix
additional text to append to the year in the titleshowMonthAfterYear
render the month after year in the title (defaultfalse
)clearInvalidInput
clear the input field (iffield
is set) on invalid input (defaultfalse
)onSelect
callback function for when a date is selectedonClear
callback function for when date is set to null or invalid dateonOpen
callback function for when the picker becomes visibleonClose
callback function for when the picker is hiddenonDraw
callback 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.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="pikaday.js"></script>
<script src="plugins/pikaday.jquery.js"></script>
<script>
// activate datepickers for all elements with a class of `datepicker`
$('.datepicker').pikaday({ firstDay: 1 });
// chain a few methods for the first datepicker, jQuery style!
$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);
</script>
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'], function(Pikaday) {
var picker = new Pikaday({ field: document.getElementById('datepicker') });
});
The same applies for the jQuery plugin mentioned above.
See the jQuery AMD example for a full version.
require(['jquery', 'pikaday.jquery'], function($) {
$('#datepicker').pikaday();
});
If you use a CommonJS compatible environment you can use the require function to import Pikaday.
var pikaday = require('pikaday');
When you bundle all your required modules with Browserify and you don't use Moment.js specify the ignore option:
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 = new Pikaday({ field: document.getElementById('datepicker') });
picker.toString('YYYY-MM-DD')
Returns the selected date in a string format. If Moment.js exists (recommended) then Pikaday can return any format that Moment understands, otherwise you're stuck with JavaScript's default.
picker.getDate()
Returns a basic JavaScript Date
object of the selected day, or null
if no selection.
picker.setDate('2015-01-01')
Set the current selection from a date string or JavaScript Date
object. This will be restricted within the bounds of minDate
and maxDate
options if they're specified. If the given date is null or invalid, the current selection is cleared (the input field is also cleared if clearInvalidInput
option is true
). You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect and onClear callbacks (true), allowing the date to be set silently.
picker.getMoment()
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.clearDate()
Clears the current selection. If the first parameter is true
then the input field (if field
is set) is also cleared. You can optionally pass a boolean as the second parameter to prevent triggering of the onClear callback (true), allowing the date to be cleared silently.
picker.parseDate('2015-01-01', ['MM-DD-YY', 'MM-DD-YYYY', 'YYYY-MM-DD'])
Returns a JavaScript Date
object parsed from the given string. If Moment.js exists (recommended) then .parseDate()
can use Moment to match against one or more formats defined by the second parameter (defaults to the inputFormats
option).
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).
picker.gotoToday()
Shortcut for picker.gotoDate(new Date())
picker.gotoMonth(2)
Change the current view by month (0: January, 1: Februrary, etc).
picker.nextMonth()
picker.prevMonth()
Go to the next or previous month (this will change year if necessary).
picker.gotoYear()
Change the year being viewed.
picker.setMinDate()
Update the minimum/earliest date that can be selected.
picker.setMaxDate()
Update the maximum/latest date that can be selected.
picker.isVisible()
Returns true
or false
.
picker.show()
Make the picker visible.
picker.adjustPosition()
Recalculate and change the position of the picker.
picker.hide()
Hide the picker making it invisible.
picker.destroy()
Hide the picker and remove all event listeners — no going back!
The default 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 isRTL
to true
for languages that are read right-to-left.
Although Moment.js is recommended, other JavaScript Date libraries such as Datejs and Sugar's Date extension can be used instead by overriding parseDate
and toString
on Pikaday.prototype
with custom date parser and formatter functions. See the Datejs example and Sugar example as a guide.
Pikaday can be easily integrated with most JavaScript MVC Frameworks such as Ember and Knockout. See the Ember example and Knockout example for example integrations.
Pikaday is a pure datepicker. It will not support picking a time of day. However, there have been efforts to add time support to Pikaday.
See #1 and #18. These reside in their own fork.
You can use the work @stas did at stas/Pikaday
or the work @owenmead did more recently at owenmead/Pikaday which is based on version 1.1.0.
- IE 7+
- Chrome 8+
- Firefox 3.5+
- Safari 3+
- Opera 10.6+
- David Bushell http://dbushell.com @dbushell
- Ramiro Rikkert GitHub @RamRik
Thanks to @shoogledesigns for the name.
Copyright © 2014 David Bushell | BSD & MIT license