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.

a time 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?

Franz Noel · Accepted Answer · 2012-09-30 06:53:33Z

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.

enter image description here

edited Sep 30, 2012 at 6:53

answered Sep 30, 2012 at 3:03

Franz Noel

1,9002 gold badges26 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Customizing time inputs in HTML5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related