-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Description
Using todayButton together with showTimeSelect breaks the datepicker layout. The time panel becomes visually detached/overlaid instead of staying as a stable right-side panel. It also makes it so that the time panel is displayed slightly lower than the date panel.
Additionally, when the datepicker is close to the right edge of the viewport, the time panel can be clipped / disappear. The popper shifts to stay within the viewport, but the time panel is moved outside of the popper box and is not part of the shifted area.
Reproduction
<DatePicker
selected={date}
onChange={setDate}
showTimeSelect
todayButton="Vandaag"
/>
What causes it
CSS forces the time panel into absolute positioning when todayButton is present:
src/stylesheets/datepicker.scss
The DOM order renders Today button before the time section:
src/calendar.tsx: renderTodayButton() comes before renderTimeSection()
https://github.com/Hacker0x01/react-datepicker/blob/main/src/calendar.tsx#L1327-L1337
So the implementation relies on the absolute-position “hack”. As a result:
- the time panel is visually detached/shifted (and can sit lower than the date panel)
- when the popper is shifted to fit within the viewport, the time panel does not shift together with it, because it is positioned outside the popper box via the negative right offset, and can be clipped / disappear near the viewport edge.
Expected
Time panel stays aligned to the right and layout remains stable when enabling todayButton, and the time panel is not clipped when the datepicker is shifted to stay within the viewport.