How to make use of it:

1. Include the required JavaScript libraries on the web page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.maskedinput.umd.min.js"></script>

2. Create a brand new MaskedInput object and set the information format as follows:

var dateMask = new MaskedInput({
    format: 'dd/MM/yyyy hh:mm tt',
    // additional patterns to recognize the format
    patterns: {}
});

3. Append the date masks to a given input.

dateMask.$el.appendTo('#date-field-cell');

4. Set the choices for every area:

dateMask
  .fieldOption('hours_12', 'required', false)
  .fieldOption('minutes', 'required', false)
  .fieldOption('ampm', 'required', false)
  .resize();

5. API strategies.

dateMask

// Get an internal field element by index or by name.
.field(index)

// Get/set a field's configuration option
.fieldOption(name, newValue)

// Get/set an internal field's value by index or by name.
.fieldValue(index, newValue)

// Get/set a configuration option
.option(name, newValue)

// Call if something has drastically changed and the control needs to be regenerated. 
// Only applicable when you've manually changed a field's type.
.render()

// Update the size of the field's content. 
// This can't be called when the control is not on the DOM yet. If you don't want the field to be dynamically sized, you can skip calling this.
.resize()

// A synonym for value
.val(newValue?)

// Get/set the full value
.value(newValue?)

6. PartType parameters:

/**
* @typedef {String} MaskedInput~PartType
* @name MaskedInput~PartType
* @enum {String}
*/
var PartType = {
  /** @const */ NUMBER: 'number',
  /** @const */ TEXT: 'text',
  /** @const */ LABEL: 'label'
};

API

Methods

• .field(index) – Get an internal field element by index or by name.
• .fieldOption(name, newValue?) – Get/set a field’s configuration option (See MaskedInput~Part for available options)
• .fieldValue(index, newValue?) – Get/set an internal field’s value by index or by name.
• .option(name, newValue?) – Get/set a configuration option
• .render() – Call if something has drastically changed and the control needs to be regenerated. Only applicable when you’ve manually changed a field’s type.
• .resize() – Update the size of the field’s content. This can’t be called when the control is not on the DOM yet. If you don’t want the field to be dynamically sized, you can skip calling this.
• .val(newValue?) – A synonym for value
• .value(newValue?) – Get/set the full value

MaskedInput~Options

• format: String – The format to use. This is the most important thing here.
• patterns: Object<String, MaskedInput~Pattern> – Additional patterns to recognize in the format

MaskedInput~PartType

You can access these value through MaskedInput.PartType.

• NUMBER = 'number' – A numeric field
• TEXT = 'text' – A textual field (possibly with pre-defined options)
• LABEL = 'label' – A label – this is the readonly text that appears between fields

MaskedInput~Part

• type: MaskedInput~PartType – Type of the field
• name: String – Name for this field
• ariaLabel: String – An ARIA accessibility label
• text: String – Text for this field if it’s a LABEL
• placeholder: String – Placeholder for the field
• length: Number – The length, in characters, of the field. 0 means “any length”. Applicable for both numeric and textual fields.
• maxLength: Number – The maximum length, in characters, of the field.
• numericMin: Number – Minimum numeric value
• numericMax: Number – Maximum numeric value
• validator: RegExp|String|function(value:String) – Validator regex or function
• options: String[] – Array of pre-defined String options for a textual field.
• postProcess: function(value,type:MaskedInput~Part) – Function for post-processing a value before retrieving by user
• padding: Number|Boolean – Enable (or specify minimum) padding in value result (default true)
• required: Boolean – Is the field required (default true)
• defaultValue: String – Default value, used if the field is not required
• forcePlaceholderWidth: String – Always consider placeholder’s width (default true)

MaskedInput~Pattern ^{(inherits MaskedInput~Part)}

• pattern: RegExp|String – Specifies the regex pattern to look for in the format

All MaskedInput~Part options (except validator and postProcess) can be specified in the MaskedInput~Pattern as they are, or as a function that returns the value.
If a function is specified, then it receives the regex match in the arguments. i.e. length: 2, vs. length: function (match) { return match.length }.

Simple Input Mask & Validation Plugin, jquery.maskedinput Github, jquery masked input get value without mask, jquery inputmask validator, jquery mask function example

See Demo And Download