Skip to main content

Ribbon Datepicker properties


add datepicker snippet


const data = [
type: "datePicker",
id?: string | number,
parent?: string,
value?: string | Date,
valueFormat?: string | "date",

dateFormat?: string,
disabledDates?: (date: Date) => boolean,
icon?: string,
label?: string,
mark?: (date: Date) => string,
mode?: "calendar" | "year" | "month" | "timepicker", // "calendar" by default
placeholder?: string,
thisMonthOnly?: boolean, // false by default
timeFormat?: 24 | 12, // 24 by default
timePicker?: boolean, // false by default
weekNumbers?: boolean, // false by default
weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default

css?: string | string[],
disabled?: boolean,
editable?: boolean,
hidden?: boolean,
width?: string,
// more Ribbon controls


  • type - (required) the type of a control, set it to "datePicker", if not specified - the navItem type is applied by default
  • id - (optional) the id of a control, auto-generated if not set
  • parent - (optional) the parent of the item
  • value - (optional) the value of a datepicker
  • valueFormat - (optional) defines the format of the output date (either a string or a Date object)
  • dateFormat - (optional) the format of dates, by default "%d/%m/%y", check the Calendar properties for more details. The date format must include delimiters (space or symbol), otherwise an error will be thrown
  • disabledDates - (optional) allows disabling some date intervals, day labels are dimmed. Read the details
  • icon - (optional) an icon for a Datepicker, the name of the icon from the used icon font
  • label - (optional) specifies an AREA label for the control
  • mark - (optional) adds a CSS class to specific days. Read the details
  • mode - (optional) the mode of displaying of the datepicker every time the user opens it
  • placeholder - (optional) a tip for the input
  • thisMonthOnly - (optional) hides dates of the previous/next months relative to the currently displayed one
  • timeFormat - (optional) defines the time format for a timepicker in the datepicker
  • timePicker - (optional) adds a timepicker into the datepicker. Use the timeFormat property to define the format of displaying time in the timepicker
  • weekNumbers - (optional) defines whether to show the numbers of weeks
  • weekStart - (optional) sets the starting day of the week
  • css - (optional) adds style classes to a Datepicker control
  • disabled - (optional) defines whether a Datepicker control is disabled
  • editable - (optional) allows a user to enter the value of the control manually; false by default
  • hidden - (optional) defines whether a Datepicker is hidden
  • width - (optional) the width of the field


Related article: Datepicker