pikaday field

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


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


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


Simple datepicker:

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

results matching ""

    No results matching ""