Bootstrap4 icon in text input

I’ve added a jquery-based datetime picker to a project (because the datetime-locale is either not implemented, or implemented badly, in different browsers.

My code for the input is:

<div class="input-group input-group-md">
 	input id="acdate" class="form-control"   value="<?php echo $acdatetime; ?>" type="text">
 	<div class="input-group-append">
          <span class= "input-group-text"><i class="fa fa-calendar"></i></span>
     </div>
</div>

Only problem is the “customer” (not really just doing project for a local charity) rather likes the idea of the calendar icon appearing inside the text box (like in Edge datetime input)ather than as an icon alongside as the above produces.
I’ve seen Boostrap 3 examples, but can’t get them to work with Bootstrap 4.
Any ideas?
Many thanks

Sponsor our Newsletter | Privacy Policy | Terms of Service