关闭时间必须大于打开时间答案

【问题标题】：Close time must be greater than open time关闭时间必须大于打开时间
【发布时间】：2021-06-16 07:16:48
【问题描述】：

我正在实现一个场景，用户将选择商店的开店和关店时间。我想确保关闭时间总是大于打开时间。用户将按如下方式选择时间

周一开周一闭上午 8:00 下午 5:00

我想确保关闭时间在逻辑上正确确定。

我使用的是时间输入类型。

我的代码如下

<div class="working-hours">
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Monday Open</label>
        <input type="time" name="mondayopentime" class="form-control monday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Monday Close</label>
        <input type="time" name="mondayclosingtime" class="form-control monday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group mt-4-c">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="1" id="monday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group mt-4-c">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="1" id="mon_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Tuesday Open</label>
        <input type="time" name="tuesdayopentime" class="form-control tuesday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Tuesday Close</label>
        <input type="time" name="tuesdayclosingtime" class="form-control tuesday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="2" id="tuesday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="2" id="tue_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Wednesday Open</label>
        <input type="time" name="wednesdayopentime" class="form-control wednesday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Wednesday Close</label>
        <input type="time" name="wednesdayclosingtime" class="form-control wednesday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="3" id="wednesday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="3" id="wed_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Thursday Open</label>
        <input type="time" name="thursdayopentime" class="form-control thursday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Thursday Close</label>
        <input type="time" name="thursdayclosingtime" class="form-control thursday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="4" id="thursday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="4" id="thurs_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Friday Open</label>
        <input type="time" name="fridayopentime" class="form-control friday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Friday Close</label>
        <input type="time" name="fridayclosingtime" class="form-control friday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="5" id="friday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="5" id="fri_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Saturday Open</label>
        <input type="time" name="saturdayopentime" class="form-control saturday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Saturday Close</label>
        <input type="time" name="saturdayclosingtime" class="form-control saturday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="6" id="saturday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="6" id="sat_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>
  <div class='row'>

    <div class="col-md-3">
      <div class="form-group">
        <label>Sunday Open</label>
        <input type="time" name="sundayopentime" class="form-control sunday" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>Sunday Close</label>
        <input type="time" name="sundayclosingtime" class="form-control sunday" />
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="hours[]" class="form-check-input filled-in" value="7" id="sunday">
          <label class="form-check-label">24 Hours</label>
        </div>
      </div>
    </div>

    <div class="col-md-3 mt-4-c">
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" name="closed[]" class="form-check-input filled-in" value="7" id="sun_c">
          <label class="form-check-label">Closed</label>
        </div>
      </div>
    </div>


  </div>

</div>

我如何确保如果用户选择周一开放时间为上午 9 点，那么在周一关闭时间选项中它必须大于上午 9 点使用 jquery？

我想在 Jquery 中实现解决方案。

谢谢

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。见How to Ask 和minimal reproducible example

标签： jquery jquery-plugins

【解决方案1】：

您可以执行以下操作，但显然您的实现会略有不同：

<div class="form-group">
<label>Monday Open</label>
<input type="time" name="mondayopentime" class="form-control monday"/>
<input type="submit" value="Submit" onclick="myFunc()"/>
</div>
<script>
function myFunc(){
var value = $('.monday').val();
var num = timeStringToFloat(value)
if(num > 9){
console.log("Time should be before 9")
}else{
console.log("OK");
}
    
}
function timeStringToFloat(time) {
var hoursMinutes = time.split(/[.:]/);
var hours = parseInt(hoursMinutes[0], 10);
var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
return hours + minutes / 60;
}
</script>

【讨论】：