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

您可以使用jQuery datepicker http://jqueryui.com/datepicker/

或者您可以使用

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

但是最后一种解决方案不适用于所有浏览器，如果要使用跨浏览器，则应使用datepicker插件或互联网上可用的任何其他插件

Answer 2

如果您确实要使用下拉菜单，则假设您有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>

但是我建议使用输入time和date。如果您有特定的时间范围，则希望人们插入，可以通过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>

如何在表单字段中添加日期和时间

2 个答案: