Bootstrap Datepicker seems to not work

Question

I'm having a problem with date picker. Search some answers too but doesn't seem to help, here's my code:

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../datepicker/css/datepicker.css" />

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" placeholder="Date"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../datepicker/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datepicker();
    });
</script>

the datetimepicker is a separate plugin.... looks like you are missing the plugin js file — Arun P Johny, Jan 30 '14 at 04:22
may be you want to say `$('#datetimepicker1')..datepicker({ });` — Deepak Ingole, Jan 30 '14 at 04:22
@ArunPJohny I forgot to paste the plugin. edited now. but still doesn't work :( — Audix, Jan 30 '14 at 04:27

score 0 · Answer 1 · answered Jan 30 '14 at 04:32

0

The #datetimepicker1 should be in the input, not in the div. So try this:

<div class='input-group date'>
    <input type='text' class="form-control" placeholder="Date" id='datetimepicker1' />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

answered Jan 30 '14 at 04:32

Tomatrox

693
7
14

After further Googling, I found out it has something to do with modal and datepicker z-axis. Will update later. – Audix Feb 01 '14 at 01:41

score 0 · Answer 2 · answered May 29 '14 at 06:24

Please change jQuery selector to $('**.input-group.date**').datepicker();

The DIV is necesaary for datepicker to be initiated. Please refer to http://jsbin.com/lerojivu/1/edit

The variant zIndex in source code

place: function ()...

Due to using the modal z-index property is zero. It can be amended listed below.

var parentZIndexes = this.element.parents().map(function() {
                           return parseInt($(this).css('z-index')) || 0;
                      });
var zIndex = Math.max.apply(Math, Array.prototype.slice.apply(parentZIndexes)) + 10;

Bootstrap Datepicker seems to not work

2 Answers2

Linked