JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Give Me a Call</button>
<div class="modal fade" id="callModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="source">Source</label>
<input type="text" class="form-control" id="source" placeholder="Complete source address">
</div>
<div class="form-group">
<label for="destination">Destination</label>
<input type="text" class="form-control" id="destination" placeholder="Complete destination address">
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="text" class="form-control" id="contact" placeholder="Your mobile number">
</div>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="cal">Shifting Date & Time</label>
<div class='input-group date'...
JavaScript
$(function () {
$('#datetimepicker1').datetimepicker();
});