Как создать часовой минутный селектор времени в одном входе с помощью spinner jquery?

---

< input id= "spinner" name= "value">
< input id= "spinner1" name= "value">

$("#spinner").spinner();
$("#spinner1").spinner();

Это создает 2 входа, которые я хочу в одном из них в 1 текстовом поле.

Это должно быть как

11:25

Если указатель находится на 11 и я нажимаю стрелку вверх спиннера он должен увеличиться только с 11 до 12
а если указатель находится на 25, то он должен увеличиться с 25 до 30 с шагом +5.

Примечание: мне нужны как часы, так и минуты с разделителем': 'только в 1 текстовом поле.

Что я уже пробовал:

Я уже пробовал это

< input id= "spinner" name= "value">
< input id= "spinner1" name= "value">

$("#spinner").spinner();
$("#spinner1").spinner();

но это создает 2 текстовых поля со стрелками spinner, которые я хочу в одном с форматом HOUR:Minute

---