The Maskerade jQuery plug-in allows for validating dates/times, enforcing masks, automatically interprets keyboard entries based on mask settings, and tries to incorporate all of the best functionality of other date/time plug-ins.
In order to use the Maskerade plug-in, you need the following:
To support browsers that don't support the "placeholder" attribute, you can use a placeholder shim, such as https://github.com/parndt/jquery-html5-placeholder-shim
To attach Maskerade to your form elements, just invoke the jQuery plug-in using the following syntax:
$("#myDate").maskerade([options]);You can use any selector that will target date input elements on your page.
This argument is optional and allows you to customize the settings used for each instance of the plug-in. For a list of all available options, see the Options section.
Now that we have a reference to the widget, we can invoke any of the public API calls.
Use the val() method to get/set the value of your input element. The value argument is an optional: if not include, val() returns the value of the field; if it's included, it sets the value of the field to value.
Destroys the Maskerade widget. This restores the original input element in the DOM. A callback can be optionally included.
Boolean of whether or not the field has focus on it or not.
Boolean whether or not the field has been changed from it's original value when Maskerade was attached to the field.
Returns the original value when Maskerade was attached to the field.
There are a number of options available for customizing handling of the widget.
{
mask: // The date mask; this can be defined as a "data-mask"
// parameter on the input element (see Example
// below)
, lang: "en" // The i18n language to display the dates in;
// languages other than english need to be defined
// to the plugin (see Example below)
, keyBufferDelay: 1250 // Delay to reset the keyboard buffer after mask input
// event handlers
, init: null // Callback that occurs when initialization starts
, ready: null // Callback that occurs once the plug-in is ready for
// use
, changed: null // Callback that occurs once the field has changed
, completed: null // Callback that occurs when a value has been
// successfully completed
, corrected: null // Callback that occurs when a field has been
// automatically corrected (eg. Feb 29, 2001 being
// corrected to Feb 28, 2001)
, invalid: null // Callback that occurs when there is an invalid
// keyboard entry
, keydown: null // Callback that occurs when the keyboard key is
// pressed down
, keyup: null // Callback that occurs when the keyboard key is
// released
, keypress: null // Callback that occurs when the keyboard key has
// been pressed down and released
, formatMask: null // Callback used to format the mask for display to
// the user (can be a string "toLowerCase" or
// "toUpperCase" to convert display case of the mask)
}Go to next mask position (or next field)
Go to previous mask position (or previous field)
Go to next mask position
Go to previous mask position
Increase the current mask value
Decrease the current mask value
Reset current changes
Deletes current mask value (or entire mask if selected)
Same as [DEL] key.
Go to first mask position
Go to last mask position
NOTE: Standard keyboard operations such as "Select All", "Copy" and "Paste" should all work.
1 or 2 digit numeric day of the month (1-31)
2 digit numeric day of the month (01-31)
1 or 2 digit numeric month (1-12)
2 digit numeric month (01-12)
Abbreviated name of month
Full name of month
Start of quarter (Q1, Q2, Q3, Q4)
Start of quarter w/date (Q1 - Jan 1, Q2 - Apr 1, Q3 - Jul 1, Q4 - Oct 1)
Start of quarter w/full date (Q1 - January 1, Q2 - April 1, Q3 - July 1, Q4 - October 1)
End of quarter (Q1, Q2, Q3, Q4)
End of quarter w/date (Q1 - Mar 31, Q2 - Jun 30, Q3 - Sep 31, Q4 - Dec 31)
End of quarter w/full date (Q1 - March 31, Q2 - June 30, Q3 - September 31, Q4 - December 31)
2 digit numeric year (00-99)
4 digit numeric year
1 or 2 digit numeric 12 hour clock (1-12)
2 digit numeric 12 hour clock (01-12)
1 or 2 digit numeric 24 hour clock (1-24)
2 digit numeric 24 hour clock (01-24)
1 or 2 digit numeric minute (0-59)
2 digit numeric minute (00-59)
1 or 2 digit numeric seconds (0-59)
2 digit numeric seconds (00-59)
First character of am/pm
am/pm
The first thing we need to do is to load the required JavaScript libraries and the CSS stylesheet used by the widget:
<!---// load jQuery and the jQuery iButton Plug-in //--->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.maskerade.js"></script>
<script type="text/javascript" src="./lib/jquery.html5-placeholder-shim.js"></script>
<!---// load the Maskerade CSS stylesheet //--->
<link type="text/css" href="./css/jquery.maskerade.css" rel="stylesheet" media="all" /> Before you can invoke an instance of the Maskerade widget, you must have one or more input elements on your page.
<input type="text" class="input-date" data-mask="mmm dd, yyyy" />The next step is to actually create an instance of the Maskerade widget. You want to make sure to initialize the widget after all the necessary DOM elements are available, which makes the document.ready event a great place to initialize the widget.
<script type="text/javascript">
$(document).ready(function (){
$(".input-date").maskerade();
});
</script>Now let us take a look at what the code above produced.
You can use all various forms of keyboard input to manipulate the date.
Here is how to define a language:
$.maskerade.i18n["fr"] = {
date: {
defaultMask: "d mmm yyyy"
, monthNames: ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]
, monthNamesShort: ["Jan","Fév","Mar","Avr","Mai","Jun","Jul","Aoû","Sep","Oct","Nov","Déc"]
}
};
// on DOM ready
jQuery(function ($){
$(".input-date").maskerade({lang: "fr"});
}
For many more examples, see the Giva Labs - Maskerade Example Page page.
Copyright 2017 Giva, Inc. (http://www.givainc.com/labs/) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.