Why are there two types of apprearance of DateTime Picker? How to set it not to be full-screen

The first type of full-sreen is annoying:

And the second type is delightful:
Can anybody tell me how to set the display mode manully?? It feels like they apprear randomly and I have no control about it.
Thank you for your incoming suggessions guys!!!

Your two screenshots are not the same component, but I’ll try my hardest to explain what you’re seeing.

Your first screenshot is from the Alarm Journal Table, which uses a Date Range Selector, and so we have to provide the ability to select Historical or Relative time ranges - so there are some extra pieces which are required. Your second screenshot is a DateTime Input which allows for selecting a single point in time.

Both of these date/time selector components have a sort of “popover” which houses a DateTime Picker inside of it. This DateTime Picker is almost always wider than the component which is actually displaying it. If you look a your second screenshot you can see that the displayed popover is actually quite a bit wider than the Input from which it originates. The display of this picker depends on the available space of the screen and the position of the picker. If we can not place the picker popover directly beneath the originating component, then we opt to open the popover as a modal (fullscreen appearance).

In your first screenshot, the picker’s location/origin is the extreme upper-left of the screen - in fact, it is literally against the left edge of the screen. When the picker “opens” it finds that it is unable to open directly below (or above) the component’s location/origin, and so it opens itself in modal mode to guarantee it can display itself properly. It does this in your screenshot because there is not enough space to the left of the component; if you were to adjust your Alarm Table such that it was not up against the left edge of the screen then the picker would display as in your second screenshot, as you can see here:

Isn’t it nice to have Alarm Journal Table’s Date Range Select as a new component?
For me it is better choose to use.


Thank you so much sir, words fail to express my appreciation to you. Now I finally know how to deal with these datetime pickers, thank you again.

1 Like

Same question for me.

The question was already answered above.