Skip to main content

Datepicker

This is a control of Toolbar to select a date. Check the article below to see how easy and convenient to add and customize the Datepicker control.

Adding Datepicker​

The Datepicker control can be easily added to a toolbar with the help of the add() method of Tree Collection.

toolbar.data.add({
    type: "datePicker"
});

Properties​

You can provide the following properties in the configuration object of a Datepicker control.

Adding an icon​

The Datepicker control can have an icon which is set through the corresponding option icon.

{
    type: "datePicker",
    icon: "dxi dxi-calendar-today",
}

Showing/hiding Datepicker​

To hide/show Datepicker, you should pass the ID of Datepicker to the hide() / show() methods of Toolbar:

toolbar.show(id);
toolbar.hide(id);

Enabling/disabling Datepicker​

It is possible to enable or disable Datepicker by the enable() / disable() methods:

toolbar.enable(id);
toolbar.disable(id);