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

noUiSlider

selectEx

Last updated 2 years ago

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

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