Реакция-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"
/>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
63
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вам нужно использовать 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],
},
},
]}
/>
Другие вопросы по теме
Как изменить цвета в теме гравитации?
Показывать только активное содержимое раскрывающегося меню — несколько кнопок раскрывающегося списка на панели навигации
Конфликты вертикального выравнивания CSS
Не могу центрировать изображения в сетке в CSS
Кнопка «Выход» и логотип не кликабельны
Реагировать показать последний элемент
Как стилизовать братьев и сестер при наведении курсора в CSS?
Почему в этом HTML-коде клик дает 2 вместо 1?
Как я могу правильно использовать размытие для нескольких элементов, за исключением одного, с помощью JavaScript
Проблема с размытием фона в Chrome
Похожие вопросы
Запустить пользовательское событие за пределами представления маршрутизатора в Vue.js
Chrome.debugger.attach() не прикрепляется к текущей вкладке
Гистограмма highcharts исчезает при обновлении с 10.2.1 до 10.3.1
Проблема с позиционированием куба в многопользовательской игре
Как дождаться, пока все сжатые файлы будут извлечены
Фильтрация массива объектов по нескольким категориям
Получить общее количество пустых значений в объекте
Является ли передача обратного вызова компоненту в качестве дочернего элемента хорошим шаблоном в React?
Показывать только активное содержимое раскрывающегося меню — несколько кнопок раскрывающегося списка на панели навигации
JQuery().html(), содержащий тег сценария с type="module", включая внешний файл js
popperPlacement = "bottom" также не сработало. При прокрутке он автоматически переключается с нижнего на верхнее размещение.