12-hour time

  1. Focus on the time box and enter 6:15 followed by tab; appends 'am'. This can be configured to assume am or pm.
  2. Go back and enter 18:15 and hit tab, converts to 6:15pm
  3. Enter 6:15pm and hit tab; nothing changes.
  4. Enter 9 and hit tab; expands to 9:00am.
  5. Try 545; it expands to 5:45am
  6. Enter 99:78pm and hit tab; throws an error.
  7. Enter elephant and hit tab; instant validation failure calls custom callback.
  8. Try entering it is 4:55pm now (the whole phrase). This "fuzzy" behavior can be disabled in options.
  9. Enter 6:15:23pm and hit tab; replaced by 6:15pm (the seconds option is disabled, for more info see below).

24-hour time

Military time can be enabled by passing {default:24} in the options object.

  1. Repeat the steps above; this box has been configured as required and using 24-hour time.
  2. Leave it blank and then tab out of it: because it's been required, it will show an error if nothing is entered.

Including seconds

Allow the entry of seconds by passing {seconds:true} in the options object.

  1. Enter 6:15:23pm and hit tab; nothing changes, seconds remain.
  2. Enter 6:15pm and hit tab; nothing changes, seconds are added.

Server-Side

A php class is also provided for server-side validation, which can be coupled with this widget for a total solution.