Допустим у нас есть задача стилизовать обычный input с типом времени type=time на более удобным с интерфейсом переключения времени и крупным шрифтом.

Для начало отобразим HTML разметку

Время
 

	  
		
		
	  
	  
		
	  
  

Добавим CSS стили уберем дефолтовые стили и иконки input time

/* Timepicker */
.timepicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
	max-width:50px;
}

.timepicker-inner {
	 display: flex;
    justify-content: center;
    align-items: center;
	margin:0;
	height:30px;
	padding: 5px;
}

.timepicker::-webkit-calendar-picker-indicator {
    background: none;
    display: none
}

.timepicker-wrapper .timepicker-decrement,.timepicker-wrapper .timepicker-increment {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 100%;
	padding-top: 4px;
}

.timepicker-wrapper .timepicker-decrement .icon-arrow-left,.timepicker-wrapper .timepicker-decrement .icon-arrow-right,.timepicker-wrapper .timepicker-increment .icon-arrow-left,.timepicker-wrapper .timepicker-increment .icon-arrow-right {
    color: #00a0dc
}

.timepicker-wrapper .timepicker {
    border: none;
    border-radius: 2px;
    background-color: #fff;
    text-align: center;
    font-weight: 700;
    color: #00a0dc;
    font-size: .875rem
}

.timepicker-wrapper .timepicker::placeholder,
.timepicker-wrapper .timepicker::-webkit-input-placeholder,
.timepicker-wrapper .timepicker:-moz-placeholder,.timepicker-wrapper .timepicker::-moz-placeholder,
.timepicker-wrapper .timepicker:-ms-input-placeholder  {
    text-align: center
}

.timepicker-wrapper .timepicker {
    width: 100%;
    text-align: center;
	padding:0px !important;
	font-size:16px;
	height:30px;
	color:#666 !important;
}

.floating-label {
	text-align:center;
}
/* Timepicker  end */

По умолчанию предлагаю установить текущее время пользователя для этого дополним js (JQuery) скрипт

var initTimepicker = function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
hours = String(hours).padStart(2, '0');
minutes = String(minutes).padStart(2, '0');
$('.timepicker-wrapper input.timepicker').val(hours + ':' + minutes);
}
initTimepicker();

С помощью функции String(hours).padStart(2, ‘0’); добавим в начало одно символьных значений ноль, для часов и минут таймера, присвоим получившееся значение к таймеру

Далее осталось дополнить навигацию по стрелочкам для уменьшения или увеличения таймера на 1 час времени для этого используем следующий код.

$('.timepicker-wrapper > .timepicker-inner > .timepicker-decrement, .timepicker-wrapper > .timepicker-inner > .timepicker-increment').click(function(){ // перключатель количества персон
			var inputTime = $(this).parent().find('input.timepicker');
			var currentVal = inputTime.val();
			var changeVal = $(this).hasClass('timepicker-decrement') ? (parseInt(currentVal) - 1) : (parseInt(currentVal) + 1);
			changeVal = String(changeVal).padStart(2, '0');
			if(changeVal <  0){
				changeVal = 23;
			}
			if(changeVal > 23){
				changeVal = '00';
			}
			inputTime.val( changeVal + ':00' );
		});

Допустимое значение не должно опускаться ниже 0 или быть более 23 часов.

Таймер времени стилизован и готов к работе! Надеюсь этот пост был полезен для Вас!