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: