时间戳

首页 > 解决方案 > 关闭时间必须大于打开时间

jquery - 关闭时间必须大于打开时间

问题描述

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

周一开 周一闭 8:00 AM 5:00 PM

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

我正在使用时间输入类型。

我的代码如下

<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 中实现解决方案。

谢谢

标签： jqueryjquery-plugins

解决方案

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

<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>

推荐阅读