Как добавить дату и время в поле формы

Question

Я создаю форму заявки и хочу добавить поле для посетителей, чтобы выбрать дату и время.Как бы я мог добавить это в раскрывающееся поле, которое я добавил до сих пор.Я думаю, что календарь и время раскрытия будут работать для этого типа формы?Я добавил тег div ниже.

<div class="col-md-12 vehicle-assessment">
  <h6>Hirer Details </h6>
</div>
<div class="col-md-6">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
  </div>
</div>

Answer 1

Если вы действительно хотите использовать выпадающее меню, это будет сделано примерно так, при условии, что у вас есть список DateTime объектов.Время будет сделано аналогичным образом.

<div class="col-md-12 vehicle-assessment">
  <h6>Hirer Details </h6>
</div>
<div class="col-md-6">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
  </div>
  <div class="form-group">
    <label>Date</label>
    <select id="date">
      <option value="">--Please choose an option--</option>
      <?php
      // Assuming $dates is a list of DateTime Objects
      foreach $date in $dates {
        echo "<option value='" . $date->getTimestamp() . "'>" . $date->format('Y-m-d') . "</option>";
      }
      ?>
    </select>
  </div>
</div>

Но я бы предложил использовать входные данные время и дата .Если у вас есть конкретные временные рамки, которые вы хотите, чтобы люди вставляли, это можно добавить с помощью min и max.Если вам нужны дополнительные ограничения, вы всегда можете написать некоторый JS-код, чтобы не применять воскресенье или что-то в этом роде.

    <div class="col-md-12 vehicle-assessment">
      <h6>Hirer Details </h6>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Full Name</label>
        <input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
      </div>
      <div class="form-group">
        <label>Date</label>
        <input type="date" name="date"
               value="2018-07-22"
               min="2018-01-01" max="2018-12-31" />
      </div>
       <div class="form-group">
        <label>Date</label>
        <input type="time" name="time"
               min="0:00" max="24:00" required />
      </div>
    </div>

Answer 2

Вы можете использовать jQuery datepicker http://jqueryui.com/datepicker/

или вы можете использовать

<input type="date" name="date" />

, но последнее решение не будет работать для всех браузеров, если вы хотите использовать кросс-браузер, чем вы должныиспользовать плагин datepicker или любые другие плагины, доступные в интернете