Question

I’m trying to use datepicker with twitter bootstrap with the following code but while the date-picker calendar shows up, it doesn’t change the date in the form when I click on it.

<div class="control-group">
    <label class="control-label" for="dp1">Meeting Date</label>
    <div class="controls">
        <div class="input-append date" id="dp1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
            <input class="span2" size="16" type="text" value="12-02-2012" readonly>
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
    </div>
</div>

I’m calling datepicker with these lines :

<link href="css/datepicker.css" rel="stylesheet">
...
<script src="js/bootstrap-datepicker.js"></script>
<script>
    $(function(){
        $('#dp1').datepicker();
    });
</script>

Am I missing something ? There’s a call to jQuery but if I remove it, the calendar doesn’t show up anymore.

Answer 1

here you select a div as a date-picker thats why it wont work
you have to select textbox as a datepicker

like

$('#dp1>input').datepicker();