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() or parse() method of Tree Collection.

Example

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

Example

toolbar.data.parse([    {        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.

Example

{    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:

Example

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

Enabling/disabling Datepicker#

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

Example

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