Read api changes in v2+
// Strings and translations
monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
// Display strings
monthPrev: '◀',
monthNext: '▶',
showMonthsFull: true,
showWeekdaysShort: true,
// Today and clear
today: 'Today',
clear: 'Clear',
// Date formats
format: 'd mmmm, yyyy',
formatSubmit: false,
hiddenSuffix: '_submit',
// First day of week
firstDay: 0,
// Month & year dropdown selectors
monthSelector: false,
yearSelector: false,
// Date ranges
dateMin: false,
dateMax: false,
// Dates disabled
datesDisabled: false,
// Disable picker
disablePicker: false,
// Calendar events
onOpen: null,
onClose: null,
onSelect: null,
onChangeMonth: null,
// Themes
klass: {
active: 'pickadate__active',
input: 'pickadate__input',
// Picker holder states
holder: 'pickadate__holder',
opened: 'pickadate__holder--opened',
focused: 'pickadate__holder--focused',
// Picker frame and wrapper
frame: 'pickadate__frame',
wrap: 'pickadate__wrap',
// Picker calendar
calendar: 'pickadate__calendar',
// Picker header
header: 'pickadate__header',
// Month navigation
monthPrev: 'pickadate__nav--prev',
monthNext: 'pickadate__nav--next',
// Month & year labels
month: 'pickadate__month',
year: 'pickadate__year',
// Select menus
selectMonth: 'pickadate__select--month',
selectYear: 'pickadate__select--year',
// Picker table
table: 'pickadate__table',
// Weekday labels
weekdays: 'pickadate__weekday',
// Calendar body
body: 'pickadate__body',
// Day states
day: 'pickadate__day',
dayDisabled: 'pickadate__day--disabled',
daySelected: 'pickadate__day--selected',
dayHighlighted: 'pickadate__day--highlighted',
dayToday: 'pickadate__day--today',
dayInfocus: 'pickadate__day--infocus',
dayOutfocus: 'pickadate__day--outfocus',
// Footer
footer: 'pickadate__footer',
// Today and clear buttons
buttonClear: 'pickadate__button--clear',
buttonToday: 'pickadate__button--today'
}
With the basic setup, you get all the default options listed above.
$( '.datepicker' ).pickadate()
$( '.datepicker' ).pickadate({
monthPrev: '←',
monthNext: '→',
weekdaysShort: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
showMonthsFull: false
})
As a default, today
is set to 'Today'
and clear
is set to 'Clear'
.
If either of the options is false
, the button is not displayed.
$( '.datepicker' ).pickadate({
today: false,
clear: 'Clear date'
})
You can add support for any language in one of two ways.
(1) By passing the months and weekdays as an array for each invocation:
$( '.datepicker' ).pickadate({
formatSubmit: 'dd/mm/yyyy',
monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
today: 'aujourd\'hui',
clear: 'effacer'
})
(2) Or by globally extending the default picker options for all instances:
$.extend( $.fn.pickadate.defaults, {
formatSubmit: 'dd/mm/yyyy',
monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
today: 'aujourd\'hui',
clear: 'effacer'
})
There are extensions for 26 languages already available.
* The data-value
attribute and formatSubmit
option are both required to parse your dates correctly. Read more ↓
$( '.datepicker' ).pickadate({
format: 'You selected: dddd, dd mmm, yyyy',
formatSubmit: 'yyyy/mm/dd'
})
Display human-friendly date formats while using a different format to submit to the server. Pick a date:
This is done by creating a hidden input field using the name
attribute of the original input element plus the string set in the hiddenSuffix
option.
As a default, hiddenSuffix
is '_submit'
.
The dates can be formatted using the following rules:
Rule | Result | Example |
---|---|---|
d |
Date | 1-31 |
dd |
Date with leading zero | 01-31 |
ddd |
Weekday – short | Sun-Sat |
dddd |
Weekday – full | Sunday-Saturday |
m |
Month | 1-12 |
mm |
Month with leading zero | 01-12 |
mmm |
Month name – short | Jan-Dec |
mmmm |
Month name – full | January-December |
yy |
Year – short | 00-99 |
yyyy |
Year – full | 2000-2999 |
$( '.datepicker' ).pickadate({
firstDay: 1
})
Set firstDay
to 1
for Monday and 0
for Sunday.
$( '.datepicker' ).pickadate({
monthSelector: true,
yearSelector: true
})
If monthSelector
or yearSelector
is true
, a select menu is displayed:
To change the number of years in the dropdown, set yearSelector
as an even integer (half before the year in focus and half after). If set to true
, it defaults to 10
.
$( '.datepicker' ).pickadate({
yearSelector: 4
})
$( '.datepicker' ).pickadate({
dateMin: [ 2012, 10, 14 ],
dateMax: 5
})
dateMin
and dateMax
can be either
[ yyyy, mm, dd ]
)true
or false
)If dateMax
or dateMin
is true
, the range limit is set to today.
If dateMax
or dateMin
is an integer, it represents the relative number of days till the min or max date.
$( '.datepicker' ).pickadate({
dateMin: -8,
dateMax: true
})
Pass an array of arbitrary dates (each formatted as [ yyyy, mm, dd ]
) to disable them.
$( '.datepicker' ).pickadate({
datesDisabled: [
[ 2012, 12, 2 ],
[ 2012, 12, 5 ],
[ 2012, 12, 28 ]
]
})
Disable certain days of the week, such as all Saturdays (7th day of week) and Sundays (1st day of week), by passing an integer between 1 and 7:
$( '.datepicker' ).pickadate({
datesDisabled: [
1, 7,
[ 2012, 12, 2 ],
[ 2012, 12, 5 ],
[ 2012, 12, 28 ]
]
})
Alternatively, disable all the dates in the calendar, except the ones specified if you set true
as the first item in the array.
$( '.datepicker' ).pickadate({
datesDisabled: [
true,
1, 7,
[ 2012, 12, 2 ],
[ 2012, 12, 5 ],
[ 2012, 12, 28 ]
]
})
$( '.datepicker' ).pickadate({
disablePicker: true
})
Some mobile browsers have good native support for type="date"
.
If you want to selectively disable the picker for these browsers, I would suggest detecing for support with something like Modernizr and then setting disablePicker
to true
.
$( '.datepicker' ).pickadate({
onOpen: function() {
console.log( 'Opened' )
},
onClose: function() {
console.log( 'Closed' )
},
onSelect: function() {
console.log( 'Selected: ' + this.getDate() )
},
onStart: function() {
console.log( 'Hello there :)' )
}
})
Have events trigger as the user interacts with the picker.
Within scope of these methods, this
refers to the calendar picker. Pick a date:
There are 4 basic events in the options:
onStart
: invoked when the picker is triggered.onOpen
: invoked when the picker opens.onSelect
: invoked when a date is selected.onClose
: invoked when the picker closes.Within the scope of these methods, this
refers to the calendar object.
$( '.datepicker' ).pickadate({
onStart: function() {
var calendar = this
}
})
Alternatively, you can grab the calendar object like this:
var input = $( '.datepicker' ).pickadate()
var calendar = input.data( 'pickadate' )
The following methods are available on the calendar:
You can also grab the jQuery object of the input element from the calendar like this:
this.$node
* The $
prefix is used to signify a jQuery object.
calendar.open()
calendar.close()
If you want to open the calendar on page load, you can add the autofocus
attribute to the input
element:
<input autofocus class="datepicker" type="text">
calendar.show( month, year )
Month and year have to be integers representing the month and year to show on the calendar.
year
is optional. If none is specified, it shows the month of the year already in focus.
calendar.show( 4 )
This method does not open the calendar. However, the methods are chainable. So you can do this:
calendar.show( 10, 2015 ).open()
Get the date selected on the calendar:
calendar.getDate()
Optionally, you can pass a format in which you would like to get the date:
calendar.getDate( 'yyyy-mm-dd' )
To get the underlying JavaScript Date object, set format
to true
:
calendar.getDate( true )
calendar.setDate( year, month, date, superficial )
year
, month
, date
are required integers representing the date to select on the calendar.
calendar.setDate( 2020, 2, 14 )
superficial
is optional. If superficial
is true
, the date will only be superficially selected. This means the input
value won't change.
calendar.setDate( 2020, 2, 14, true )
calendar.clear()
Clears the selected date value from the input
element.
With some custom stylings and api mastery, you can do something like this:
// Grab the clear button and bind the event
// to clear the input value on click
var clearButton = $( '#clearButton' ).on({
click: function() {
inputElement.data( 'pickadate' ).clear()
}
})
// Grab the input element and trigger the picker
// with the onStart and onSelect methods to
// toggle the clear button visibility
var inputElement = $( '.datepicker' ).pickadate({
format: 'dd mmmm, yyyy',
formatSubmit: 'yyyy-mm-dd',
clear: false,
onStart: showOrHideClear,
onSelect: showOrHideClear
})
// Check if the input element has a value
// and show or hide the button as needed
function showOrHideClear() {
if ( this.$node.val() ) clearButton.show()
else clearButton.hide()
}
calendar.getDateLimit( upper, format )
upper
is optional. If upper
is true
, it returns the maximum date. Otherwise it gets the minimum date.
format
is also optional. If none is specified, it falls back to the default format
option in your invocation. Dates can be formatted with these rules.
calendar.getDateLimit()
calendar.getDateLimit( true, 'yyyy-mm-dd' )
calendar.setDateLimit( date, upper )
date
is a required array, integer, or boolean – similar to the dateMin
and dateMax
options in your invocation. This date is used to set the limit.
upper
is optional. If upper
is true
, it will set the date as the maximum date selectable. Otherwise it sets it as the minimum date selectable.
calendar.setDateLimit( 40 )
calendar.setDateLimit( [ 2013, 6, 23 ], true )
Using the calendar API, you can create two calendars with a "from" and "to" interaction.
// When a date is selected on the "from" picker,
// get the date and split into an array.
// Then set the lower limit of the "to" picker.
var picker_from = $( '#picker_from' ).pickadate({
onSelect: function() {
var fromDate = createDateArray( this.getDate( 'yyyy-mm-dd' ) )
picker_to.data( 'pickadate' ).setDateLimit( fromDate )
}
})
// When a date is selected on the "to" picker,
// get the date and split into an array.
// Then set the upper limit of the "from" picker.
var picker_to = $( '#picker_to' ).pickadate({
onSelect: function() {
var toDate = createDateArray( this.getDate( 'yyyy-mm-dd' ) )
picker_from.data( 'pickadate' ).setDateLimit( toDate, 1 )
}
})
// Create an array from the date while parsing each date unit as an integer
function createDateArray( date ) {
return date.split( '-' ).map(function( value ) { return +value })
}
Browser support: IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser
Read api changes in v2+ or view project on Github
The pickadate.js
script supports IE 9+ by default. To support IE 7+ and other old browsers, use the pickadate.legacy.js
script instead.
Made by Amsul