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() method of Tree Collection.{
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: