The JQuery Datetimepicker has the option to display the calendar inline however when this is done it removes the input box that shows the user selected input value of the date and time chosen. How can you make the datetimepicker display the calendar inline and also display the user selected date in an input box.
JQuery datetimepicker and Documentation and CDN
$("#datetime-inline").datetimepicker({
format: "D d M Y - H:i a",
inline: true,
})
$("#datetime-non-inline").datetimepicker({
format: "D d M Y H:i a",
inline: false,
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Input box for inline input -->
<input type="text" id="selected-date-here" readonly="readonly" value="make input date show here" style="width: 200px;"><br><br>
<!-- The inline datetimepicker to make work -->
<input id="datetime-inline" placeholder="click here to choose date" style="cursor: pointer;"><br><br><br>
<!-- The non-inline datetimepicker for an example that displays the user input date in the input box when selected with the calendar -->
<input id="datetime-non-inline" placeholder="user input date shows here" style="cursor: pointer; width: 200px">