End time validation in jquery time picker

Question

I need to restrict user to select end time greater than start time in a timepicker with 12 hrs format. - 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

JQuery bootstrap time picker for rails app: And this code i provided validation for business hours starting and ending time.

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

Well I also having the similar issue, I wanted timepicker such as If I select start time, then immediately end time should be changed and end time should initiate with the value of start time. also I was using it for the each day of the week so I had 7 start and 7 end timepickers. so my solution was below.

My html was below and under the week days (7) loop.

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

and my solution was below for this.

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'
    });
});

In above code I only initiated the start timepicker and end timepicker was initiated when, user select any time from the start timepicker and this will work for each instance of timepicker with the same class.

Answer 3

Check this.

I see one problem related with the 12.00 am or pm. IMHO it should be 0.00am or pm instead of 12, because using am/pm the 12 should not be used. You cand easily edit the timeToInt function to catch this problem.

$(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);
});

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

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