在单个弹出页面中打开带有日期和时间的按钮单击模式？ HTML 和 JavaScript

Question

我试图在按钮单击时打开一个模式以显示日历日期和时间，但没有得到任何东西。任何人都可以分享您的知识。

我添加了我想要显示的示例图像。

Answer 1

由于您提供了一张图片作为示例，我认为您想要创建精确的外观。

以下内容应该可以在您的模式中使用。

const dateInput = document.getElementById('input-date');
const displayDate = document.getElementById('currentDate');

// init view
(() => {
  let date = new Date().toISOString().slice(0, 10);

  dateInput.value = date;
  displayDate.innerText = date;
})();

.wrapper {
  padding: 1rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#time-picker {
  padding: 1rem;
  border: 1px solid #000;
  -webkit-box-shadow: 0 0 10px #000; 
  box-shadow: 0 0 10px #000;
  text-align: center
}

#header-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#data-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.bordered {
  border: 1px solid #000;
  margin: 1rem;
}

#time-picker .bordered > div {
  margin: 0.5rem;
}

#time-picker > a {
  width: 100%;
}

#currentDate {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

#button-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
}

<div id="outer">
  <div class="wrapper">
    <label for="input-date">Need Date</label>
    <input type="date" id="input-date">
  </div>

  <div id="time-picker">
    <div id="header-row">
      <div>Hours of Day</div>
      <div>Minutes</div>
    </div>

    <div id="data-row">      
      <div class="bordered">
        <div>00</div>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
        <div>07</div>
        <div>08</div>
        <div>09</div>
        <div>10</div>
        <div>11</div>
      </div>
      
      <div class="bordered">
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
      </div>

      <div class="bordered">
        <div>00</div>
        <div>05</div>
        <div>10</div>
        <div>15</div>
        <div>20</div>
        <div>25</div>
        <div>30</div>
        <div>35</div>
        <div>40</div>
        <div>45</div>
        <div>50</div>
        <div>55</div>
      </div>
    </div>
    <a href="#">Clear Time</a>
  </div>
  
  <h2 id="currentDate" class="row"></h2>
  
  <div id="button-row">
    <button>Cancel / Exit</button>
    <button>Save / Exit</button>
  </div>
</div>