pikaday

Search…
pikaday
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
Please note, this field depend on the following library:
​Pikaday​
​Moment.js (see issue #59)
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
Internationalization
The default i18n configuration format looks like this:
1
i18n: {
2
    previousMonth : "Previous Month",
3
    nextMonth     : "Next Month",
4
    months        : ["January","February","March","April","May","June","July","August","September","October","November","December"],
5
    weekdays      : ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
6
    weekdaysShort : ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
7
}
Copied!
Usage
Simple datepicker:
1
{
2
  type: "pikaday",
3
  label: "Simple datepicker",
4
  placeholder: "User's birth of date",
5
  model: "date",
6
  validator: validators.date,  
7
  pikadayOptions: {
8
    position: "top left"
9
  }
10
}
Copied!
noUiSlider
selectEx
Last modified 3yr ago
Copy link
Contents
Special properties of field
pikadayOptions
Usage