Links

pikaday

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
Please note, this field depend on the following library:

Special properties of field

Property
Default
Accepted values
Description
autocomplete
none
see doc
Indicates whether the value of the control can be automatically completed by the browser.
placeholder
none
String
Placeholder text for input field
pikadayOptions
{}
Object
Settings of component. See details below.
readonly
false
Boolean
If true, the input field is read only

pikadayOptions

For more details, see the official Pikaday documentation.
Property
Default
Accepted values
Description
bound
true
Boolean
Automatically show/hide the datepicker on field focus (default true if field is set)
position
"bottom left"
String
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
true
Boolean
Can be set to false to not reposition datepicker within the viewport, forcing it to take the configured position
container
undefined
DOM node
DOM node to render calendar into, see container example
format
null
Function
The default output format for .toString() and field value (requires Moment.js for custom formatting)
formatStrict
false
Boolean
The default flag for moment's strict date parsing (requires Moment.js for custom formatting)
defaultDate
null
Date
The initial date to view when first opened
setDefaultDate
?
Boolean
make the defaultDate the initial selected value
firstDay
1
Number
First day of the week (0: Sunday, 1: Monday, etc)
minDate
null
Date
the minimum/earliest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
maxDate
null
Date
the maximum/latest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
disableWeekends
false
Boolean
Disallow selection of Saturdays or Sundays
disableDayFn
null
Function => Boolean
Callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
yearRange
null
Number or Array
Number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015])
showWeekNumber
false
Boolean
Show the ISO week number at the head of the row
isRTL
false
Boolean
Reverse the calendar for right-to-left languages
i18n
{}
Object
Language defaults for month and weekday names (see internationalization below)
yearSuffix
""
String
Additional text to append to the year in the title
showMonthAfterYear
false
Boolean
Render the month after year in the title
showDaysInNextAndPreviousMonths
false
Boolean
Render days of the calendar grid that fall in the next or previous months to the current month instead of rendering an empty table cell
numberOfMonths
1
Number
Number of visible calendars
mainCalendar
"left"
"left" or "right"
When numberOfMonths is used, this will help you to choose where the main calendar will be. Only used for the first display or when a selected date is not already visible
theme
null
String
Define a classname that can be used as a hook for styling different themes, see theme example

Internationalization

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"]
}

Usage

Simple datepicker:

{
type: "pikaday",
label: "Simple datepicker",
placeholder: "User's birth of date",
model: "date",
validator: validators.date,
pikadayOptions: {
position: "top left"
}
}
Last modified 3yr ago