Что такое свойство отображения группы ввода bootstrap?

Question

Я реализую кнопку, которая скрывает или отображает дату при нажатии.

  <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>

вот так

Но как только я нажму кнопку, я могу ' t Найдите правильное свойство отображения, чтобы восстановить узор на изображении выше. Я пробовал block / inline / inline-block. Каждый из них заканчивается вот так

function pickTime()
{
    var x = document.getElementById("datepicker");
    if (x.style.display === "none") {
      x.style.display = "block";
    } 
    else {
      x.style.display = "none";
    }
}

Answer 1

Проблема в том, что div - это блочный элемент , а функции, которые вам нужны, относятся к встроенному элементу.

Исправление довольно простое, просто введите свои данные внутрь div, например:

<div class="input-group-prepend">
    <span class="input-group-text">Date</span>
    <input id="exampleDate" class="datepicker" name="date" type="text" value="14 August, 2014" data-value="2014-08-08" />
</div>

и то же самое для другого div