DatePicker

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

DatePicker

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"
        }
    ]
});

Attributes

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

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

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
focus sets focus to a control
getProperties returns an object with the available configuration attributes of the control
getValue returns the current value of a DatePicker control
getWidget returns the dhtmlxCalendar widget attached to a DatePicker control
hide hides a DatePicker control
isDisabled checks whether a DatePicker control is disabled
isVisible checks whether a DatePicker control is visible on the page
setProperties allows changing available configuration attributes of the control dynamically
setValue sets a date in a DatePicker control
show shows a DatePicker control on the page
validate validates a DatePicker control

List of the control events:

afterChangeProperties fires after configuration attributes of the control have been changed dynamically
afterHide fires after a control is hidden
afterShow fires after a control is shown
afterValidate fires after the control value is validated
beforeChangeProperties fires before configuration attributes of the control are changed dynamically
beforeHide fires before a control is hidden
beforeShow fires before a control is shown
beforeValidate fires before the control value is validated
change fires on changing the value of a control
input fires when a user enters the value of a control in the input manually

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

Related sample:  Form. Get Widget Of Control

Back to top