`todayButton` + `showTimeSelect` breaks layout due to absolute-positioned time container

Author: sjanik-rtbhCreated Feb 17, 2026Updated Jul 9, 2026

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

typescript
<DatePicker
  selected={date}
  onChange={setDate}
  showTimeSelect
  todayButton="Vandaag"
/>
Image

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.

Related issues

https://github.com/Hacker0x01/react-datepicker/issues/2543 https://github.com/Hacker0x01/react-datepicker/issues/3428

Source: Hacker0x01/react-datepicker