Click the calendar icon the show in the input field

Question

I have a problem to insert the calendar icon in the input field, the function need when the calendar icon is clicked then the date will show in the input field. Below is my sample coding:

<input type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>

The output like below the picture:

Actually, I want the output like below the picture. It can click the calendar icon then choose the date will show in the input field:

Hope someone can guide me on how to solve it. Thanks.

Answer 1

You can use something like this (Bootstrap):

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

And For Icons you can use for example font awesome.