I have been working on implementing a button that toggles the visibility of a datepicker when clicked.
<a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a>
<div style="vertical-align: top;display:inline-block ;position:relative;border:5px solid white">
<button type="button" class="btn btn-primary btn-lg mr-5" onclick="pickTime()">Check Operating Stalls By Custom
Time</button>
<div class="input-group mb-3" id="datepicker" style="">
<div class="input-group-prepend">
<span class="input-group-text">Date</span>
</div>
<input id="exampleDate" class="datepicker" name="date" type="text" value="14 August, 2014"
data-value="2014-08-08" />
<div class="input-group-prepend">
<span class="input-group-text">Time</span>
</div>
<input id="exampleTime" class="timepicker" type="time" name="time" valuee="2:30 AM" data-value="0:00" />
</div>
Check out this image for reference
However, I'm facing an issue where after clicking the button, I am struggling to find the correct display property to restore the layout as shown in the image above. I've experimented with block/inline/inline-block but none of them produce the desired result shown in this image
function pickTime()
{
var x = document.getElementById("datepicker");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
}