pikaday
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
Property | Default | Accepted values | Description |
autocomplete | none | 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 |
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 | |
format | null | Function | The default output format for .toString() and field value (requires Moment.js for custom formatting) |
formatStrict | false | Boolean | |
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 |
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"]
}
{
type: "pikaday",
label: "Simple datepicker",
placeholder: "User's birth of date",
model: "date",
validator: validators.date,
pikadayOptions: {
position: "top left"
}
}
Last modified 3yr ago