Skip to main content


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{    type: "datePicker"});

Example[    {        type: "datePicker"    }]);


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:


Enabling/disabling Datepicker#

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