Customizing time inputs in HTML5

Question

I'm trying to customize the standard HTML5 time input field to fit my purposes. I'm working on a mobile web app where I'm asking the user to enter a time for the duration of an event (mm:ss). The almost gives me what I want, but I need to remove the AM/PM picker.

Does anyone know of a way to get rid of AM/PM? Alternatively, is there a way to modify the <input type="number" /> to accept the : character and also fit this purpose?

Answer 1

Just as long as you have an html select box, it will convert directly to that type of combo box on any site.

But, You may want to check out jqueryMobile. Instead of one combo box for the date and time. You can separate minutes and seconds select menus.

• Here is the link going to JqueryMobile Docs: http://jquerymobile.com/demos/1.1.1/
• Here is the select menus that you might need. http://jquerymobile.com/demos/1.1.1/docs/forms/selects/

You'll be surpirsed how easy jQueryMobile is. It's just like writing html with custom attributes.

The moment you get both the minutes and seconds, you can concatenate it with javascript. Then, submit it as one value of POST.

You can probably imagine this image below as minutes and/or seconds instead of Month, date, and year.