How to create a hour minute time selector in single input using spinner jquery?

See more:

ASP.NET

Javascript

MVC

jQuery

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

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

This creates 2 inputs i want in one them in 1 textbox.

It should be like

11:25

If pointer is on 11 and i click up arrow of spinner it should increase only 11 to 12
and if pointer is on 25 it should increase 25 to 30 with +5 increment.

Note: I want both hours and minute with ':' seperator in 1 Textbox only.

What I have tried:

I have tried this

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

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

but this creates 2 textbox with spinner arrows i want in one with HOUR:Minute format