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);