- Lightweight (less than 5kb minified and gzipped)
- No dependencies (but includes a parser option to format dates results)
- Single and range dates
- Modular CSS classes for easy styling
DatePicker needs to be bound to an input field or two for handle ranges:
<input type="text" id="datepicker">
Add the JavaScript to the end of your document:
<script src="datepicker.js"></script>
<script>
var picker = new DatePicker({ dataFields: [document.getElementById('datepicker')] });
</script>
For advanced formatting pass a parser object prior to DatePicker. In dates.js
you will find a lightweight one we usually use in our projects. But this is optional.
See the examples folder for a full version.
<input type="text" id="datepicker" value="9 Oct 2014">
<script src="dates.js"></script>
<script src="datepicker.js"></script>
<script>
var picker = new DatePicker({
dataFields: [document.getElementById('datepicker')],
parser: Dates,
format: 'D MMMM YYYY',
onSelect: function() {
console.log(this.getDate());
}
});
</script>
As the examples demonstrate above DatePicker has many useful options:
dataFields
bind the datepicker to a form field or twoposition
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 the positions example (default to 'bottom left')reposition
can be set to false to not reposition datepicker within the viewport, forcing it to take the configuredposition
(default: true)parser
to manage an output format for.toString()
andfield
valueformat
the default output format for.toString()
andfield
value (requires a parser for custom formatting)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()
ormoment().toDate()
)maxDate
the maximum/latest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)disableWeekends
disallow selection of Saturdays or SundaysdisableDayFn
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]
)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
)theme
define a classname that can be used as a hook for styling different themes, see the theme example (defaultnull
)onSelect
callback function for when a date is selectedonOpen
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
You can control the date picker after creation:
var picker = new DatePicker({ dataFields: [document.getElementById('datepicker')] });
picker.toString('YYYY-MM-DD')
Returns the selected date in a string format. If parser exists (recommended) then Datepicker can return any format that the parser understands, otherwise you're stuck with JavaScript's default.
picker.getDate(which)
Returns a basic JavaScript Date
object of the selected day, or null
if no selection. which
param is optional (in
and out
are the valid values), taking the start date (in
) if no param is present.
picker.setDate('2015-01-01')
Set the current selection. This will be restricted within the bounds of minDate
and 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.
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.
- IE 7+
- Chrome 8+
- Firefox 3.5+
- Safari 3+
- Opera 10.6+
Original work for the Pikaday project belongs to David Bushell http://dbushell.com @dbushell and Ramiro Rikkert GitHub @RamRik.
Copyright ยฉ 2015 Buti | BSD & MIT license