JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<label class="control-label col-md-4" for="startDateInput">Date</label>
<div class="col-md-7">
  <div class="input-group date" id="dateInput" style="max-width: 280px" data-provide="datepicker">
    <input type="text" class="form-control" name="dateInput">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>
<input type="submit" value="submit" id="saveButton" class="btn btn-primary" />

JavaScript

$('#dateInput').datepicker({
   format: 'dd/mm/yyyy'
 });


 $('#saveButton').on('click', function() {
   var method1 = $('#dateInput').datepicker('getDate');
   var method2 = $('#dateInput input').val();
   alert(method1);
   alert(method2);

 });