Как переключить кнопками время в поле Input?

Question

[verstak2020]

Как реализовать на js такой функционал, что бы при клике на стрелки переключалось время от 11:00 до 22:00 с интервалом в 30 минут?
Есть такая разметка:

<div class="modal-order__form-time">
     <button class="arrow-top increase">
     <input type='any', value='11:00', min='1', max='24'>
     <button class="arrow-down decrease">
</div>

нашел такой пример

$(document).ready(function () {
	$('.decrease').click(function () {
		var $input = $(this).parent().find('input');
		var count = parseInt($input.val()) - 1;
		count = count < 1 ? 1 : count;
		$input.val(count);
		$input.change();
		return false;
	});
	$('.increase').click(function () {
		var $input = $(this).parent().find('input');
		$input.val(parseInt($input.val()) + 1);
		$input.change();
		return false;
	});
});

но как его адаптировать под формат времени...

Comments

[Stalker_RED]

Используйте при оформлении вопроса теги <code> (кнопка </> в редакторе). Сейчас сложно разобрать эту кашу.

Answer 1

[ptvalx]

Убрать запятую в теге input и изменить тип на text.

var Min = 660;
var Step = 30

function setTime($input) {
	var hour = Math.floor(Min/60);
	var min = Min % 60;
	
	if (min < 10) {
		min = '0' + min;
	}
	
	if (hour < 10) {
		hour = '0' + hour;
	}
	
	$input.val(hour + ':' + min);
}

$('.decrease').click(function () {
	Min -= Step;
	if (Min <= 0) Min += 1440;
	setTime($(this).parent().find('input'));
});

$('.increase').click(function () {
	Min += Step;
	if (Min >= 1440) Min -= 1440;
	setTime($(this).parent().find('input'));
});

Comments

[verstak2020]

Спасибо большое. А можно сделать, что бы время начиналось от 11:00 и до 22:00 ?

[ptvalx]

verstak2020,

var Min = 660;//минуты
var Min_value = 660;//минимум
var Max_value = 1320;//максимум
var Step = 30

function setTime($input) {
  var hour = Math.floor(Min/60);
  var min = Min % 60;
  
  if (min < 10) {
    min = '0' + min;
  }
  
  if (hour < 10) {
    hour = '0' + hour;
  }
  
  $input.val(hour + ':' + min);
}

$('.decrease').click(function () {
  if ((Min - Step) < Min_value) return;
  Min -= Step;
  if (Min <= 0) Min += 1440;
  setTime($(this).parent().find('input'));
});

$('.increase').click(function () {
  if ((Min + Step) > Max_value) return;
  Min += Step;
  if (Min >= 1440) Min -= 1440;
  setTime($(this).parent().find('input'));
});