JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-3">
    <label for="pickupdate">Pickup Date</label>
      <div class="field-wrap">
       <input class="pickupdate datepicker" id="pickupdate" name="pickupdate" type="text" readonly="readonly" value="">
      </div>
</div>

<div class="col-md-3">
 <label for="pickuptime">Pickup Time</label>
  <div class="field-wrap">
  <input class="pickuptime timepicker" id="pickuptime" name="pickuptime" type="text" readonly="readonly"  value="">
   </div>
</div>

<div class="col-md-3">
 <label for="dropoffdate">Dropoff Date</label>
  <div class="field-wrap">
   <input class="dropoffdate datepicker" id="dropoffdate" name="dropoffdate" type="text" readonly="readonly"  value="">
  </div>
</div>

<div class="col-md-3">
 <label for="dropofftime">Dropoff Time</label>
  <div class="field-wrap">
   <input class="dropofftime timepicker" id="dropofftime" name="dropofftime" type="text" readonly="readonly" value="">
  </div>
</div>

<div class="col-md-3">
 <label for="dropofftime">dob</label>
  <div class="field-wrap">
   <input class="dob valid" name="dob" type="text" readonly="readonly" aria-required="true" aria-invalid="false">
  </div>
</div>

CSS

.datepicker{z-index:1151 !important;}

JavaScript

var start = new Date();
start.setFullYear(start.getFullYear() - 150);
var end = new Date();
end.setFullYear(end.getFullYear() - 18);
var formattedDate = new Date();
var d = formattedDate.getDate();
var m =  formattedDate.getMonth();
m += 1;  // JavaScript months are 0-11
var y = formattedDate.getFullYear();
var formattedDate = d+m+y;
 

      
      $('#pickupdate').datetimepicker({
                
         format: 'DD-MM-YYYY',
         ignoreReadonly: true,

       });

       $('#dropoffdate').datetimepicker({
        
         format: 'DD-MM-YYYY',
         ignoreReadonly: true,
         useCurrent: false
         
       });
       
       $('.dob').datetimepicker({    
        format: 'DD-MM-YYYY',
         ignoreReadonly: true,
         minDate: start,
         maxDate: end,
         
       });
       
       
   $('#pickupdate').datetimepicker().on('dp.change', function (e) {
    
        var incrementDay = moment(new Date(e.date));
        incrementDay.add(1, 'days');
        $('#dropoffdate').data('DateTimePicker').minDate(incrementDay);
				$(this).data("DateTimePicker").hide();
    
   });

			 $('#pickuptime').datetimepicker({
         format: 'LT',
         ignoreReadonly: true,
       });

        $('#dropofftime').datetimepicker({
          format: 'LT',
          ignoreReadonly: true,
        });