结束后开始输入表单Onchange OnClick

时间:2018-05-22 13:15:15

标签: javascript html html5

我必须输入两个日期(任务的开始和结束)。

我想保证用户无法发送错误的数据。

我的问题是,在我可能的解决方案之后,用户无法输入date_end。

我创建了两个javascript来执行此操作,但我没有经验丰富的javascript来确定如何执行此操作。



function datestart(value) {
  document.getElementById("date_end").value = value;
}

function dateend(value) {
  var vdatestart = document.getElementById("date_start").value;
  if (value < vdatestart) {
    document.getElementById("date_end").value = vdatestart;
  }
}
&#13;
.col-30 {
  float: left;
  width: 30%;
  margin-top: 6px;
}

.col-70 {
  float: left;
  width: 70%;
  margin-top: 6px;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.row:after {
  display: table;
  clear: both;
}
&#13;
<div class="container">
  <form name="form1" action="datetime1.php" method="post">

    <div class="row">
      <div class="col-30">
        <label>Start Date and Time from Start:</label>
      </div>
      <div class="col-70">
        <input type='datetime-local' name='date_start' id='date_start' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="datestart(this.value);" onclick="datestart(this.value);" />
      </div>
    </div>
    <div class="row">
      <div class="col-30">
        <label>End Date and Time:</label>
      </div>
      <div class="col-70">
        <input type='datetime-local' name='date_end' id='date_end' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="dateend(this.value);" onclick="dateend(this.value);" />
      </div>
    </div>
    <div class="row">
      <input type="submit" name="submit" value="Send">
    </div>
  </form>
</div>
&#13;
&#13;
&#13;

enter image description here

enter image description here

0 个答案:

没有答案