Skip to main content


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",            name: "datepicker",            label: "date",            labelWidth: "50px"        }    ]});


View the full list of configuration properties of the Datepicker control.

Working with DatePicker#

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

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

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


Check the full list of methods of the Datepicker control.


Check the full list of events of the Datepicker control.

Working with the dhtmlxCalendar widget#

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").getWidget();  // -> dhtmlxCalendardatepicker.showDate(null,"month"); // shows the current month

Related sample: Form. Get Widget Of Control