JSFiddle - React, Tailwind, and code Playground

by Rolf Friedrich

HTML

<div id="horse--stables">
  Von: <input type="time" name="begin" id="begin" value="" max="20:00" required/>
  <br/><br/>
  Bis: <input type="time" name="end" id="end" value="" required/>
</div>

JavaScript

document.querySelectorAll( '#begin, #end' ).forEach( time => { time.addEventListener('blur', function( item ){
			let begin = document.querySelector( '#horse--stables #begin' ),
            end   = document.querySelector( '#horse--stables #end' ),
            max   = begin.max;
            minDiffInMinutes = 60;

        if ( begin.value > max ) {
            begin.value = max;
        }

        if (begin.value > end.value ) {

            if(  end.value.length > 0  ){
              let actualBegin = begin.value;
              begin.value     = end.value;
              end.value       = actualBegin;

              begin.classList.add( 'inputError' );
              alert( 'Begin time must be before end time' );
            }
        }
        else {
     
        		if( begin.value.length > 0 && end.value.length > 0 ){
              let [hours, minutes]       = begin.value.split( ':' );
              let [endHours, endMinutes] = end.value.split( ':' );

              beginInMinutes = ( parseInt( hours, 10 ) * 60 )    + parseInt( minutes, 10 );
              endInMinutes   = ( parseInt( endHours, 10 ) * 60 ) + parseInt( endMinutes, 10 );

              if ( ( endInMinutes < (beginInMinutes + minDiffInMinutes) ) ) {
                   let newEnd        = beginInMinutes + minDiffInMinutes;
                   let newEndHours   = Math.floor( newEnd / 60 ).toString().padStart( 2, '0' );
                   let newEndMinutes = (newEnd % 60).toString().padStart( 2, '0' );
                   end.value         = newEndHours + ':' + newEndMinutes;

                  alert( 'End time must be at least %m minutes after begin time' );
              }
            }

        }
	});
});