Skip to content

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

@sjanik-rtbh

Description

@sjanik-rtbh

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"
/>
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

#2543
#3428

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions