jQuery UI Masked Picker

The possibilities are virtually endless. Control formatted string construction in a user-friendly way.

Options

$('#maskedpicker').maskedpicker({
  widthElement: null,
  // The jQuery object of the element to match page width to.
  // Default: null (uses the input element width)

  minWidth: -1,
  // The minimum width of each page.
  // Default: -1 (no minimum width)

  maxWidth: -1,
  // The maximum width of each page.
  // Default: -1 (no maximum width)

  mask: [],
  // An array of submasks.
  // Default: Empty array (but an empty array isn't particularly useful)

  initial: null,
  // The initial value to use.  If not specified, the element's value will be used.
  // Default: null

  onFirstFocus: null,
  // An optional callback function that will be called during the first focus of the element.
  // Useful for forcing a specific page to be selected.
  // Default: null
  // Params: onFirstFocus()

  onInit: null,
  // An optional callback function that will be called during initialization.
  // Useful for handling custom mask types.
  // Default: null
  // Params: onInit(str, currmask, pos, mask)
  // Return: str (modified as necessary)

  onUpdate: null,
  // An optional callback function that will be called whenever the element is updated.
  // Updates are done very frequently, so callback code should be kept to a minimum.
  // Default: null
  // Params: onUpdate(currmask, pos, mask)

  onCleanupPage: null,
  // An optional callback function that will be called whenever a page is hidden.
  // Useful for removing events added by onShowPage().
  // Default: null
  // Params: onCleanupPage(currmask, bodyDiv, pos, mask)

  onShowPage: null,
  // An optional callback function that will be called whenever a page is displayed.
  // Useful for adding custom mask types and events.
  // Default: null
  // Params: onShowPage(currmask, bodyDiv, pos, mask)

  onKeypress: null,
  // An optional callback function that will be called whenever the user presses a key.
  // Useful for handling custom selection and navigation.
  // Note that this may require using "private" widget calls (underscore prefix)
  // to get full functionality working.
  // Default: null
  // Params: onKeypress(handled, e, options, currmask, bodyDiv, pos, mask)
  // Return: handled (modified as necessary)

  myPosition: 'left top',
  // The location of the pages in relation to atPosition.

  atPosition: 'left bottom',
  // The location of the element in relation to myPosition.
  // The default is to try to show the top left of the widget
  // just below the bottom left of the input element.

  showOptions: {},
  // Standard jQuery show() options array (e.g. animation when showing).

  hideOptions: {},
  // Standard jQuery hide() options array (e.g. animation when hiding).

  finalElement: null
  // The jQuery object of the element (usually hidden)
  // to store the selected mask values in JSON format.
});

Default types

All types
All submask types implement these keys.

  type
  (string) Specifies the type of the submask.

  page
  (string) Indicates that a page should be displayed to the user
  for this submask.

  initial
  (string) The initial value.

  prefix
  (string) A user-uneditable prefix for the final value displayed
  in the field.

  selected
  (string) The currently 'selected' option for the submask.

  selectedHtml
  (string) Same as 'selected' but may have Unicode characters
  encoded with HTML entities for easier interaction.

  suffix
  (string) An user-uneditable suffix for the final value displayed
  in the field.

  entered
  (string) A string containing the characters that the user has
  typed in.

fixed
Use 'value' to specify the value to display to the user.
Don't specify 'page' so that the mask is skipped over.

select
Displays a set of selectable options to the user.

  values
  (array) An array containing one or more arrays of strings to
  display to the user.  A value of false for an element will leave
  the space blank.

freeform
Displays a text box or textarea for freeform input.

  multiline
  (boolean) Shows a text box when false or textarea when true.
  Source element must be a textarea.

  pattern
  (regex) A Javascript regular expression to match inputs against.

  limit
  (integer) The maximum number of characters to allow.

  pad
  (string) The string 'prefix' or 'suffix'.

  padchar
  (string) A single character string with the character to pad with.

date
Displays the jQuery UI datepicker.

  options
  (object) A set of options to pass to the datepicker() initialization.

Methods

$('#maskedpicker').maskedpicker('setValue', str);
// Sets the value to the specified string.

$('#maskedpicker').maskedpicker('refresh');
// Forces the element to update its data and current selection.

$('#maskedpicker').maskedpicker('nearestPage', maskPos);
// Returns the nearest page number to the maskPos value.

$('#maskedpicker').maskedpicker('selectPage', maskPos);
// Finds the nearest page to the maskPos value and displays it.

$('#maskedpicker').maskedpicker('firstPage');
// Returns the first page number.

$('#maskedpicker').maskedpicker('lastPage');
// Returns the last page number.

$('#maskedpicker').maskedpicker('prevPage');
// Returns the previous page number from the current page.

$('#maskedpicker').maskedpicker('nextPage');
// Returns the next page number from the current page.

$('#maskedpicker').maskedpicker('hidePage');
// Hides any open page.  It is probably safer/easier to change the focused element.

$('#maskedpicker').maskedpicker('setFocusElement', newelem);
// Sets a jQuery object as the new element to have forced focus.

The following is required to use the masked picker.

• jQuery
• jQuery UI
• jQuery UI Masked Picker