Реакция-datepicker anchorDirection="дно" не работает

Я использую React-DatePicker для отображения компонента выбора времени, но я хочу, чтобы список времени отображался в нижней части входного компонента, но в настоящее время он отображается поверх поля ввода.

код:

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

Скриншот проблемы

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.

[РЕШЕНО]Перейти к решению

63

2

Javascript273878 вопросов Css75481 вопрос Reactjs73808 вопросов Sass3570 вопросов React datepicker79 вопросов

Вам нужно использовать popperPlacement = "bottom"

Итак, это будет

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

это параметры, с которыми вы можете играть

'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'

Надеюсь, это поможет

Решено

Нашел обходной путь

<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],
                      },
                    },
                  ]}
                />

Реакция-datepicker anchorDirection="дно" не работает

Ответы:

Интересные вопросы для изучения