Search code examples
javascriptjqueryhtmldatepicker

Datepicker not working inside the modal

I have a form inside a modal.

I am trying to update one input field in to a datepicker, but the calendar is not showing up.

Here is my html head:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">    </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://www.useragentman.com/tests/html5Forms/shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>


<script>$('#idTourDateDetails').datepicker(); </script>

<style>
body {   margin: 0;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; }
.datepicker {
  z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>

My html body:-

<div class="modal fade" id="myModal3" role="dialog">

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form role="form" name="passdata" action="save.php" method="POST">              

<div class="col-xs-6"><label>Joining Date</label>
 <input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
  <br/> </div>
</div>  

<input type="submit" class="btn btn-info" value="Submit" style="margin-top:20px;margin-left:80%; margin-bottom:15px;">

<script type="text/javascript">
$(document).ready(function(){
$("#myModal3").modal({backdrop: "static"});
$("#myModal3").modal('show');
});
</script>

This is how I am getting the html output:-

html output

Also nothing is happening when I click on the input box.

Not sure what I am doing wrong

Solution

  • The input type is text, replaced it to date and it will work well

    <input type="date" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>

    Here is JS Bin

    screenshot