CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4bootstrap-modal
wasanga7
wasanga7

Reputation: 242

Problems showing an input in bootstrap modal

When I click an icon I want to show a bootstrap modal asking to enter some text and a date. I have copied the code from W3Schools and edited to show the form that I need, but when I click the button it shows the labels, the text area but not the input date. When I see the code that it's showing the navigator I can see that the input has style in it. Specifically, it has display: none, but I don't know what makes the input has that style. I'm using bootstrap so the function that shows the modal is native from bootstrap.

I have tried to put the <input type='date'> in a <label> but it doesn't work. 

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

I expect that when i click the button, it shows the modal with both labels and both inputs (textarea and input date). But it doesn't show the input date.

Image of the modal

Image of DevTools in Edge

Upvotes: 0

Views: 814

Answers (1)

rrsantos
rrsantos

Reputation: 435

I'm not sure but i think you have an issue on your css (plugins).If display:none when you inspect the input. You can use above codes to override the style display attribute of your input date.

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

Upvotes: 1

Related Questions