bootstrap dateRangePicker icon not showing

Question

I am trying, with dateRangePicker to have a calendar icon showing in the input box, so the user identify rapidly that this is a date field. like on this page

Unfortunatly, there is no HTML offered for this example so I took the code from the F12 console i tried it in my code:

<div class="row">
    <div class="col-md-4 col-md-offset-2 demo">
        <h4>Your Date Range Picker</h4>
        <input type="text" id="dateRange" class="form-control">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
    </div>
</div>

This how it looks on my page.

Would be fun if it was clear in the doc how to show this icon. It could have been an option to turn on or off this feature, without having to manually add some html in your code.

Please help!

Answer 1

use this if you use bootstrap....

<div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask="">
                </div>

or see this https://almsaeedstudio.com/themes/AdminLTE/pages/forms/advanced.html

think this will help you...