Javascript: Date picker not appearing on my calender

Question

So i want to implement a date picker on my form and i currently have two input fields (which is not what i want). I want the user to click the drop down and it should display the dates that they wish to select. However this drop down list is not appearing even tho i have 'coded' it in. Here is the code:

Shopping-Cart.php

   <div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-5'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<script>
$(function () {

    $('#datetimepicker6').datetimepicker();
    $('#datetimepicker7').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });
    $("#datetimepicker6").on("dp.change", function (e) {
        $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker7").on("dp.change", function (e) {
        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
    });
});

</script>

For some reason only two input fields are appearing and the actual drop down where i select the date is not appearing.

Answer 1

Realised my error, i had input type='text' instead of input type='date'