JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form method="post" class="clearfix" action="" enctype="multipart/form-data">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="date" class="text-heading h6 font-weight-semi-bold">Date</label>
      <div class="input-group date" data-provide="datepicker">
        <input type='text' name="date" class="form-control datepicker" placeholder="DD/MM/YYY" id="datetimepicker1" placeholder="DD/MM/YYY" />
        <span class="input-group-addon">
          <i class="fa fa-calendar text-primary" aria-hidden="true"></i>
        </span>
      </div>
    </div>

  </div>

</form>

JavaScript

$( ".datepicker" ).datepicker({
  dateFormat: 'dd/mm/y',
  changeMonth: true,
  changeYear: true
});