jquery - How can I get a user to input a duration into an HTML5 web form without annoying them? -

jquery - How can I get a user to input a duration into an HTML5 web form without annoying them? -

my users need come in duration in days, hours , minutes.

right i've implemented 3 fields okay , works, not nice bit of design. alternative have 1 field , allow them type 2 days, 3 hours, 45 minutes or 15 m, or 1d 2h 35m or 90m, or 2 days, etc. seems need non-trivial parsing right, , complex internationalise.

what 'best practice' examples of web ui component allows user come in length of time simply?

please note not datepicker, duration input component.

after considering feedback here decided implement single form field terse input style , smart parsing. see http://jsfiddle.net/davesag/qgcrk/6/ end result. improvements of course of study welcome.

function to_seconds(dd,hh,mm) { d = parseint(dd); h = parseint(hh); m = parseint(mm); if (isnan(d)) d = 0; if (isnan(h)) h = 0; if (isnan(m)) m = 0; t = d * 24 * 60 * 60 + h * 60 * 60 + m * 60; homecoming t; } // expects 1d 11h 11m, or 1d 11h, // or 11h 11m, or 11h, or 11m, or 1d // returns number of seconds. function parseduration(sduration) { if (sduration == null || sduration === '') homecoming 0; mrx = new regexp(/([0-9][0-9]?)[ ]?m/); hrx = new regexp(/([0-9][0-9]?)[ ]?h/); drx = new regexp(/([0-9])[ ]?d/); days = 0; hours = 0; minutes = 0; if (mrx.test(sduration)) { minutes = mrx.exec(sduration)[1]; } if (hrx.test(sduration)) { hours = hrx.exec(sduration)[1]; } if (drx.test(sduration)) { days = drx.exec(sduration)[1]; } homecoming to_seconds(days, hours, minutes); }

jquery jquery-ui css3 design user-experience