Проблемы с отображением входа в модале начальной загрузки - PullRequest
0 голосов
/ 21 мая 2019

Когда я нажимаю на иконку, я хочу показать модальный загрузчик с просьбой ввести текст и дату. Я скопировал код из W3Schools и отредактировал, чтобы показать нужную форму, но когда я нажимаю кнопку, на ней отображаются метки, текстовая область, но не дата ввода. Когда я вижу код, показывающий навигатор, я вижу, что у ввода есть стиль. В частности, он имеет display: none, но я не знаю, что делает ввод имеет этот стиль. Я использую bootstrap, так что функция, которая показывает модал, является родной для bootstrap.

Я пытался поместить <input type='date'> в <label>, но он не работает.

<div class="modal fade" id="modalHitos" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Nuevo hito</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="newHito">Hito</label>
                    <textarea class="form-control" rows="5" id="newHito"></textarea><br>
                    <label for="newDate">Fecha prevista</label>
                    <label><input type="date" id="newDate"></label>
                 </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="saveHito()">Guardar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

Я ожидаю, что когда я нажму кнопку, он покажет модальное поле с обоими метками и обоими входами (текстовое поле и дата ввода). Но он не показывает дату ввода.

Image of the modal

Image of DevTools in Edge

1 Ответ

1 голос
/ 21 мая 2019

Я не уверен, но я думаю, что у вас есть проблема с вашим CSS (плагины). Если дисплей: нет, когда вы проверяете вход. Вы можете использовать вышеуказанные коды, чтобы переопределить атрибут отображения стиля введенной вами даты.

<input type="date" id="newDate" style="display: inline !important;"> 
...