Datepicker covers the input field within a modal

Question

The datepicker element is not created correctly within a modal, it covers the input field and I can not visualize the data

html:

<div id="datepicker" class="input-append date col-md-12" >
    <input  type="text" class="form-control">
    <span class="add-on">
        <span class="arrow"></span>
        <i class="fa fa-th"></i>
    </span>
</div>

js:

<script src="{% static 'assets/plugins/bootstrapv3/js/bootstrap.min.js' %}" type="text/javascript"></script> 


$("#datepicker").datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body',
    zIndex: 2048,
});

So what is the question? And what is the #myModal HTML looking like? — Snowmonkey, Dec 22 '17 at 17:27
what is your HTML? What is the css for the input that is being overlayed? using just the code you gave, with jQueryUI's datepicker, nothing overlays anything. What browsers? What, exactly, is the bug? — Snowmonkey, Dec 22 '17 at 17:37
I would guess its either YOUR CSS, or the datepicker's CSS -- but its something presentational. — Snowmonkey, Dec 22 '17 at 18:08

score 0 · Accepted Answer · answered Dec 22 '17 at 19:06

0

This is for posterity, the datepicker had to be initialized in the input label.

<input id="datepicker" type="text" class="form-control">

on the other hand I had to implement this suggestion:

answered Dec 22 '17 at 19:06

Gianmar

505
3
13

Datepicker covers the input field within a modal

1 Answers1