我有 2 个输入时间字段，我希望如果我在第一个输入字段时间输入 01:00 AM，那么在第二个输入字段时间中它应该只有

Question

<tr>
			<td>
			<input  type="hidden" name="date1" class="" value="1"   id="" />Monday
			</td>
			
			<td>
			  <input name="starttime" type="time" class="inputext starttime1" value="" style="cursor: text" id="starttime1" required="" />
			</td>
			
			<td>
			  <input name="endtime" type="time" class="inputext endtime1" value=""  style="cursor: text; width:34%;" id="endtime1" required="" />
			</td>
			
			<td>
			 <input type="button" name="Add"  value="Add" id="add1" class="btn btn-success add"/>
			 <a href="{{ url('/viewslots/')}}"><input type="button" class="btn btn-success" value="View"></a>
		   </td>
		   
		   </tr>

"在这里，我想验证我是否在开始时间输入了 01：00 AM，然后在结束时间中我只能输入 02：00 AM，即我只需要在这些字段中间隔 1 小时">这是我的代码，但这仅适用于我使第二个输入字段文本，这不适用于输入字段时间，我想要时间字段，因为 24 小时或 12 小时内的确切时间。

<script>
       jQuery(document).ready(function($){
		   jQuery(document).on('keyup','#starttime1', function(){
			   var starttime  =  $(this).val();
			   increaseTimeByOne(starttime);
			   });
				 function increaseTimeByOne(t) {
					 var s  = t.split(':');
					 var n  = parseInt(s[0],10);
					 var nt = (n + 1) + ":00 ";
					 console.log(nt)
					 var ampm = n >= 11 ? "PM" : "AM";
					 if(n>=11){
						 var zero = "0";
						 var s  = nt.split(':');
						 var n  = parseInt(s[0],10);
						 var nt = +n;
						 var data =  nt + ":00 ";
						 $("#endtime1").val(data);
						 }else{
							 $("#endtime1").val(nt);
							 }
							 }
							 }); 
</script>

强调文本

Answer 1

    function getTime() {
        var starttime1 = document.getElementById('starttime1').value;
        var t = starttime1.replace(/[^a-zA-Z ]/g, "");
        var arr1 = starttime1.split(' ');
        var arr2 = arr1['0'].split(':');
        var hr = parseInt(arr2['0']) + 1;
        if (hr < 10) {
            hr = '0' + hr;
        }
        var min = arr2['1'];
        var sec = '00';
        var time2 = hr + ':' + min + ':' + sec + '' + t;
        document.getElementById('endtime1').value = time2;
        
    }

<tr>
    <td>
        <input  type="hidden" name="date1" class="" value="1"   id="" />Monday
    </td>
    <td>
        <input name="starttime" type="time" class="inputext starttime1" value="" style="cursor: text" id="starttime1" required="" />
    </td>
    <td>
        <input name="endtime" type="time" class="inputext endtime1" value=""  style="cursor: text; width:34%;" id="endtime1" required="" onclick="getTime();" />
    </td>
    <td>
        <input type="button" name="Add"  value="Add" id="add1" class="btn btn-success add"/>
        <a href="{{ url('/viewslots/')}}"><input type="button" class="btn btn-success" value="View"></a>
    </td>
</tr>