DatePicker calendar: the quickest way

calendar.html

<!-- Bootstrap (comment it if you've already loaded it) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!-- datePicker -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<!-- Fontawesome... you must have it always! => -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<h3>From:</h3>
<div class='input-group date' id='datetimepicker'>
    <input type='text' class="form-control" name="from" />
    <span class="input-group-addon">
        <span class="fa fa-calendar">
        </span>
    </span>
</div>


<h3>To:</h3>
<div class='input-group date' id='datetimepicker2'>
    <input type='text' class="form-control" name="to" />
    <span class="input-group-addon">
        <span class="fa fa-calendar">
        </span>
    </span>
</div>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker, #datetimepicker2').datepicker({
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
            format: "yyyy-mm-dd"
        });
    });
</script>