JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<input type="number" maxlength="2" name="input_10[]" id="input_12_10_2" value="" min="0" max="59" step="1">

JavaScript

var timeMaxLength = 2;

$('#input_12_10_1, #input_12_10_2, #input_12_11_1, #input_12_11_2').attr({
	'max': 59
})

$('#input_12_10_1, #input_12_10_2, #input_12_11_1, #input_12_11_2').on('input', function(){
	if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);
})

$('#input_12_10_1, #input_12_10_2, #input_12_11_1, #input_12_11_2').on('focusout', function(){
	var value = $(this).val();
    
    if (value.length < 2) {
    	this.value = 0 + this.value;
    }
});