TimeInput.js

export class TimeInput extends HTMLInputElement
{
	static is = 'time-input'
	
	connectedCallback ()
	{
		this.addEventListener('input', this)
	}

	disconnectedCalback ()
	{
		this.removeEventListener('input', this)
	}

	/**
	 * @param {InputEvent} event
	 */
	handleEvent ( event )
	{
		const value = this.value.replace(/[^0-9]/g, '')
		if (value.length > 2) {
			let hours = value.slice(0, 2),
				minutes = value.slice(2)
			parseInt(hours) > 23 && (hours = '00')
			parseInt(minutes) > 59 && (minutes = '59')
			this.value = hours + ':' + minutes
		}
	}
}

customElements.get(TimeInput.is) === void 0 && customElements.define(TimeInput.is, TimeInput, { extends: 'input' })