Skip to main content

Datepicker

This is a control of Ribbon intended for date selection. Check the article below to see how to add and customize the Datepicker control in an easy and convenient way.

Adding Datepicker​

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

ribbon.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 Ribbon:

ribbon.show(id);
ribbon.hide(id);

Enabling/disabling Datepicker​

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

ribbon.enable(id);
ribbon.disable(id);