jquery时间选择器中的结束时间验证

Question

我需要限制用户在12小时格式的时间戳中选择大于开始时间的结束时间。 - http://jsfiddle.net/jonthornton/28uvg/

      <script> 
          $(function(){
          $('#start').timepicker(); 
          });
          $(function(){
          $('#end').timepicker(); 
          });
       </script>

        <div class="col-sm-8">
        <label> Start :</label> 
        <input type="text" name="start" id="start" style=" width: 107px !important;padding: 12px 20px !important;margin: 12px 0 !important;border: 1px solid #ccc !important;border-radius: 5px !important;" required/> 

        <label>End : </label> 
        <input type="text" name="end" id="end" style=" width: 107px !important;padding: 12px 20px !important;margin: 12px 0 !important;border: 1px solid #ccc !important;border-radius: 5px !important;" required/>
    </div>

Answer 1

Rails应用程序的JQuery引导时间选择器：

此代码我提供了对上班时间和下班时间的验证。

Gemfile:
gem 'bootstrap-timepicker-rails-addon'

application.js:
//= require bootstrap-timepicker

application.css.scss:
*= require bootstrap-timepicker

application.js:
$(window).on('click', function() {
  $('#timepicker_start').timepicker();
  $('#timepicker_end').timepicker();
})


$(function() {
  jQuery.validator.addMethod("lessThanZero", function(value, element) {
    //alert($('#timepicker_end').val());
     st = minFromMidnight($('#timepicker_start').val());
 et = minFromMidnight($('#timepicker_end').val());
console.log(st)
console.log(et)

    return st < et 

}, "* Starting time must be greater than endingtime");
  $.validator.setDefaults({ ignore: ":hidden:not(select)" })
  $.validator.setDefaults({ 
    ignore: []
});



function minFromMidnight(tm){
 var ampm= tm.substr(-2)
 var clk = tm.substr(0, 5);
 var m  = parseInt(clk.match(/\d+/g)[1])
 var h  = parseInt(clk.match(/\d+/g)[0])
 h += (ampm.match(/pm/i))? 12: 0;
 return h*60+m;
}

Answer 2

我也有类似的问题，我想要时间选择器，例如，如果选择开始时间，则应立即更改结束时间，并以开始时间的值启动结束时间。我在一周的每一天都使用它，所以我有7个开始和7个结束时间选择器。所以我的解决方案在下面。

我的html在工作日（7）循环的下方和下方。

<div class="col-md-2"><div class="form-group col-md-6 from"><input name="available_from[]" value="12:30am" class="form-control location starttimepckr ui-timepicker-input" placeholder="00:00" autocomplete="off" type="text"></div></div>

<div class="col-md-2"><div class="form-group col-md-5 to"><input name="available_to[]" value="12:30am" class="form-control location endtimepckr ui-timepicker-input" placeholder="00:00" autocomplete="off" type="text"></div></div>

我的解决方案在下面。

jQuery(".starttimepckr").timepicker();
jQuery(".starttimepckr").on('changeTime', function() {
    var st = jQuery(this);
    jQuery(this).parent(".from").parent(".col-md-2").next(".col-md-2").children(".to").children(".endtimepckr").val(st.val());
    st.parent(".from").parent(".col-md-2").next(".col-md-2").children(".to").children(".endtimepckr").timepicker("remove");
    st.parent(".from").parent(".col-md-2").next(".col-md-2").children(".to").children(".endtimepckr").timepicker({
        'minTime': st.val(),
        'maxTime': '11:30pm'
    });
});

在上面的代码中，我仅在用户从开始时间选择器中选择任何时间时才启动开始时间选择器和结束时间选择器，这将适用于具有相同类的每个时间选择器实例。

Answer 3

检查一下。

我看到一个与上午12点或下午有关的问题。恕我直言，它应该是上午1点或下午而不是12，因为使用am / pm不应该使用12。您可以轻松编辑timeToInt函数来捕获此问题。

＆＃13;

＆＃13;

$(function() {
  $('#start').timepicker();
  $('#end').timepicker();

  function timeToInt(time) {
    var arr = time.match(/^(0?[1-9]|1[012]):([0-5][0-9])([APap][mM])$/);
    if (arr == null) return -1;

    if (arr[3].toUpperCase() == 'PM') {
      arr[1] = parseInt(arr[1]) + 12;
    }
    return parseInt(arr[1]*100) + parseInt(arr[2]);
  }

  function checkDates() {
    if (($('#start').val() == '') || ($('#end').val() == '')) return;

    var start = timeToInt($('#start').val());
    var end = timeToInt($('#end').val());

    if ((start == -1) || (end == -1)) {
      alert("Start or end time it's not valid");
    }

    if (start > end) {
      alert('Start time should be lower than end time');
    }

  }

  $('#start').on('change', checkDates);
  $('#end').on('change', checkDates);
});

＆＃13;

#section {
height: 300px;
padding-top: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>

<div id='section'>
<label> Start :</label>
<input type="text" name="start" id="start" style=" width: 107px !important;padding: 12px 20px !important;margin: 12px 0 !important;border: 1px solid #ccc !important;border-radius: 5px !important;" required/>

<label>End : </label>
<input type="text" name="end" id="end" style=" width: 107px !important;padding: 12px 20px !important;margin: 12px 0 !important;border: 1px solid #ccc !important;border-radius: 5px !important;" required/>
</div>

＆＃13;

＆＃13;

＆＃13;