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


Related sample:  Form. All DhxForm Inputs

Related sample:  Form. DatePicker

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"
  • name - (string) the name of a control
  • id - (string) the id of a control, auto-generated if not set
  • value - (Date|string) the value of a datepicker
  • valueFormat - (string) defines the format of the value that will be returned while getting the current value of the control: "string" (default) or "Date"
  • 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)
  • required - (boolean) defines whether a control is required
  • hidden - (boolean) defines whether a control is hidden
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
  • helpMessage - (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
  • label - (string) specifies a label for a control
  • labelWidth - (string|number) 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
  • labelPosition - (string) defines the position of a label: "left"|"top"
  • 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
  • editable - (boolean) allows a user to enter the value of the control manually
  • mode - (string) specifies the mode of displaying a calendar: "calendar" (default), "month", "year"
  • 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
  • disabledDates - (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

Working with DatePicker

You can manipulate a DatePicker control by using methods of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("datepicker_id").getValue();
// -> "03/06/19"
var value = form.getItem("datepicker_id").getValue(true);
// -> Mon Jun 03 2019 00:00:00 GMT+0300

List of the control methods:

  • clear() - clears a value of a DatePicker control
  • clearValidate() - clears validation of a DatePicker control
  • disable() - disables a DatePicker control on a page
  • enable() - enables a disabled DatePicker control
  • getValue(asDate: boolean ): string|Date - returns the current value of a DatePicker control. The method can take one parameter:
    • asDate - (boolean) defines whether a date will be returned as a Date object
  • getWidget(): object - returns the dhtmlxCalendar widget attached to a DatePicker control
  • hide() - hides a DatePicker control
  • isDisabled(): boolean - checks whether a DatePicker control is disabled
  • setValue(value: string|Date) - sets the value as a string or Date for a DatePicker control
  • show() - shows a DatePicker control on the page
  • validate(): boolean - validates a DatePicker control. Returns the result of validation: true, if a control is valid, otherwise - false

Working with the widget of DatePicker control

There is a possibility to use methods of dhtmlxCalendar via the getWidget() method of a DatePicker control.

For example, you can show the current month in the control. To do this, you need to get the widget attached to the DatePicker control and then use the showDate() method of this widget.

var datepicker = form.getItem("datepicker_id").getWidget();  // -> dhtmlxCalendar
datepicker.showDate(null,"month"); // shows the current month

Related sample:  Form. Get Widget Of Control

Back to top