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