react-datepicker anchorDirection="bottom" not working [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed last year.

Improve this question

I am using react-datepicker to display a time picker component but I want the time list to be displayed in the bottom of input component but it's currently showing on top of the input field.

code :

<DatePicker
    selected={end_time}
    onChange={(date) => {
        setEndtime(date);
    }}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    dateFormat="h:mm aa"
    minTime={moment().toDate()}
    maxTime={moment().endOf("day").toDate()}
    anchorDirection="bottom"
/>

Problem screenshot

LinuxDevil · Accepted Answer · 2024-06-14 14:05:58Z

0

You need to use the popperPlacement="bottom"

So, it will be

 <DatePicker
    selected={end_time}
    onChange={(date) => {
       setEndtime(date);
    }}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    dateFormat="h:mm aa"
    minTime={moment().toDate()}
    maxTime={moment().endOf("day").toDate()}
    popperPlacement="bottom"
  />

these are it's parameters that you can play with

'auto', 'auto-left', 'auto-right', 'bottom', 'bottom-end', 'bottom-start', 'left', 'left-end', 'left-start', 'right', 'right-end', 'right-start', 'top', 'top-end', 'top-start'

Hope this help

answered Jun 14, 2024 at 14:05

LinuxDevil

963 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alpharis Over a year ago

popperPlacement="bottom" also didn't work.On scrolling it is switching from bottom to top placement automatically

Alpharis · Accepted Answer · 2024-06-19 17:37:23Z

Found a workaround

<DatePicker
                  selected={end_time}
                  onChange={(date) => {
                    setTime(date);
                  }}
                  showTimeSelect
                  showTimeSelectOnly
                  timeIntervals={30}
                  timeCaption="Time"
                  dateFormat="h:mm aa"
                  minTime={moment().toDate()}
                  maxTime={moment().endOf("day").toDate()}
                  popperPlacement="bottom-start"
                  popperProps={{
                    positionFixed: true,
                  }}
                  popperModifiers={[
                    {
                      name: "preventOverflow",
                      options: {
                        altAxis: true,
                        altBoundary: true,
                        tether: false,
                      },
                    },
                    {
                      name: "flip",
                      options: {
                        fallbackPlacements: [],
                      },
                    },
                    {
                      name: "offset",
                      options: {
                        offset: [0, 0],
                      },
                    },
                  ]}
                />

Collectives™ on Stack Overflow

react-datepicker anchorDirection="bottom" not working [closed]

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related