An input with a calendar attached to it for selecting a date.


Related sample:  All dhxForm inputs - DHTMLX Form

Adding DatePicker

You can easily add a DatePicker control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
            type: "datepicker",
            label: "date",
            labelInline: true,
            labelWidth: "50px"


You can provide the following attributes in the configuration object of a DatePicker:

  • type - (string) the type of a control, set it to "datepicker"
  • id - (string) the id of a control, auto-generated if not set
  • value - (string) the value of a datepicker
  • validation - (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
  • icon - (string) the name of an icon from the used icon font
  • placeholder - (string) a tip for the input
  • editing - (boolean) allows a user to enter the value of the control manually

  • parent - (string) the id of the parent control
  • width - (string) the width of a control
  • height - (string) the height of a control
  • css - (string) adds style classes to a control
  • disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
  • label - (string) specifies a label for a control
  • labelWidth - (string) sets the width of the label of a control
  • hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
  • labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
  • name - (string) the name of a control
  • required - (boolean) defines whether a control is required
  • help - (string) adds a help message to a control
  • preMessage - (string) a message that contains instructions for interacting with the control
  • successMessage - (string) a message that appears in case of successful validation of the control value
  • errorMessage - (string) a message that appears in case of error during validation of the control value
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

  • view - (string) specifies the mode of displaying a calendar: "calendar" (default), "month", "year"
  • value - (Date) selects a day in a calendar (adds a round blue marker)
  • date - (Date) defines the date that will be opened when the calendar is created, differs from the selected date (set by value)
  • mark - (function) adds a CSS class to specific days
  • block - (function) allows disabling some date intervals, day labels are dimmed
  • weekStart - (string) sets the starting day of the week: "monday" or "sunday" (default)
  • weekNumbers - (boolean) defines whether to show the numbers of weeks, false by default
  • timePicker - (boolean) adds a timepicker into a calendar, false by default
  • timeFormat - (number) defines the time format of a timepicker: 12-hour or 24-hour (12 or 24 (default), correspondingly)
  • dateFormat - (string) defines the format of dates in the calendar, "%d/%m/%y" by default
  • hideOtherMonth - (boolean) hides dates of the previous/next months relative to the currently displayed one
Back to top