Skip to main content
Version: 5.35.0

Display modes

The component supports five display modes that specify where on the screen is it going to render itself:

  1. 'center' - will render the Datepicker on the center of the screen
  2. 'top' - will render the Datepicker on the top of the screen sliding down
  3. 'bottom' - will render the Datepicker on the bottom of the screen sliding up
  4. 'anchored' - will render the Datepicker above or below the element it is anchored to. The anchor option will specify the element to which the Datepicker is positioned. By default it is the input element rendered by the datepicker.
  5. 'inline' - will render the Datepicker into the page embedded.

Additionally to the display option, the picker also takes into consideration the environment, whether it is used on mobile or a desktop device. This is represented by the touchUi option and by default it is set to automatically detect the environment.

info

The default buttons that appear on the picker depend on the display mode and touchUi option. It also determins if the picker operates in live selection or not.

Setting a display option
<MbscSelect display="anchored" />