jQuery & jQuery UI Based Masked Picker

File Size: 157 KB
Views Total: 1334
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery & jQuery UI Based Masked Picker

A jQuery & jQuery UI plugin that implements a masked picker to fill in a custom-formatted string. Displays a set of options for each "page" and can embed other jQuery UI widgets (e.g. datepicker).

More features:

  • Mouse-friendly navigation and data selection.
  • Keyboard-friendly navigation and data entry.
  • Actively highlights the currently affected section of text.
  • jQuery UI Themeroller compatible.
  • Licensed under the MIT or LGPL.

Basic usage:

1. Include jQuery & jQuery UI on your web page.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Include Masked Picker's Javascript and CSS after jQuery library.

<link rel="stylesheet" href="jquery.ui.maskedpicker.css">
<script src="jquery.ui.maskedpicker.js"></script>

3. Create a normal input for the time selection.

<input class="text" type="text" id="demo" value="">

4. Call the plugin and apply the input mask options to the time input.

$(function() {
    maxWidth: 400,
    mask: [
      { 'type': 'select', 'page': 'Hour', 'values': [
        ['1', '2', '3', '4', '5', '6'],
        ['7', '8', '9', '10', '11', '12']
      ] },
      { 'type': 'fixed', 'value': ':' },
      { 'type': 'select', 'page': 'Minute', 'values': [
        ['00', '15', '30', '45']
      ] },
      { 'type': 'fixed', 'value': ' ' },
      { 'type': 'select', 'page': 'AM/PM', 'case': 'insensitive', 'values': [
        ['am', 'pm']
      ] }
    initial: '12:00 am'

5. All the mask options.

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

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

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

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

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

onFirstFocus: 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)
onInit: 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)
onUpdate: 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)
onCleanupPage: 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)
onShowPage: 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)
onKeypress: null,

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

// 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.
atPosition: 'left bottom',

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

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

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

Change logs:

v1.0.4 (2015-01-30)

  • Added onFirstFocus option.
  • Made new call more consistent.

v1.0.2 (2015-01-17)

  • Added some height to selection buttons for better mobile device interaction.
  • Added 'readonly' to input elements to prevent mobile device keyboards from appearing.

v1.0.1 (2015-01-16)

  • A small change to deal with a selection bug.
  • Fixed selection not changing the selection widget. 
  • Added automatic selection of next input field to selections.

This awesome jQuery plugin is developed by cubiclesoft. For more Advanced Usages, please check the demo page or visit the official website.