jQuery DatePicker + Bootstrap sprite

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="date-form">
    
<div class="form-horizontal">
    <div class="control-group">
        <label for="date-picker-1" class="control-label">A <i class="icon-calendar"> </i>

        </label>
        <div class="controls">
            <input id="date-picker-1" type="text" class="date-picker" />
        </div>
    </div>
    <div class="control-group">
        <label for="date-picker-2" class="control-label">B</label>
        <div class="controls">
            <div class="input-append">
                <input id="date-picker-2" type="text" class="date-picker" style="max-width:0px;"/>
                <label for="date-picker-2" class="add-on"><i class="icon-calendar"></i>

                </label>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label for="date-picker-3" class="control-label">C</label>
        <div class="controls">
            <div class="input-prepend">
                <label for="date-picker-3" class="add-on"><i class="icon-calendar"></i>

                </label>
                <input id="date-picker-3" type="text" class="date-picker" />
            </div>
        </div>
    </div>
</div>
    
    <hr />
<div>
    <span id="msg" class="controls uneditable-input"></span>
</div>
</div>

CSS

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css');

.date-form { margin: 10px;

JavaScript

$(".date-picker").datepicker();

$(".date-picker").on("change", function () {
    var id = $(this).attr("id");
    var val = $("label[for='" + id + "']").text();
    $("#msg").text(val + " changed");
});