php - 我有 2 个输入时间字段，我希望输入 01 :00 AM in 1st input field time then in 2nd input field time it should be only 02:00AM

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>