Bootstrap 3 - Datepicker

by André Albson

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css">
<div id="myDatepicker" class="input-group date">
                                <input type="text" class="form-control" id="datepick">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                                <a href="#" id="duration_tag"></a>
                            </div>
                            

    <button type="button" id="clear">clear</button>
















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24813521/1366033'>Datepicker date undefined</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3.0 Skeleton</a><br/>
<div>

JavaScript

$(document).ready(function() {

$("#clear").click(function(){
    $('#myDatepicker').data('datepicker').setDate(null);
});

$('#myDatepicker').datepicker({
                    startDate: "+7d",
                });

$('#myDatepicker').on('changeDate', function(e){
     $(this).datepicker('hide');
});

});