DatePicker

An input with an attached calendar for selecting a date.

Related sample: Form. All controls

Related sample: Form. DatePicker

Adding DatePicker

You can add a DatePicker control during form initialization:

const form = new dhx.Form("form_container", {
    rows: [
        {
            type: "datepicker",
            name: "datepicker",
            label: "date",
            labelWidth: "50px"
        }
    ]
});

Properties

View the full list of DatePicker configuration properties.

Working with DatePicker

You can manage a DatePicker control with the methods and events of the object that the getItem() method returns.

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

const value = form.getItem("datepicker").getValue();
// -> "03/06/19"

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

Methods

Check the full list of DatePicker methods.

Events

Check the full list of DatePicker events.

Working with the dhtmlxCalendar widget

You can use DHTMLX Calendar methods with the getWidget() method of a DatePicker control.

For example, to show the current month in the control, get the widget attached to the DatePicker control and call its showDate() method.

const datepicker = form.getItem("datepicker").getWidget();  // -> DHTMLX Calendar
datepicker.showDate(null,"month"); // shows the current month

Related sample: Form. Get widget of control

Check the full list of DHTMLX Calendar methods that you can apply with the getWidget() method.