# Input mask

Inputmask is a JavaScript library which creates an input mask allowing you to add certain formats and input restrictions.

## Usage

### JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

    <script src="../../assets/libs/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

### Initialization

Add the `.input-mask` class on the input you want to apply a mask. After that use the `data-mask="00/00/0000"`, in which you can use `0`s, separators or space to create format your mask.

## Examples

Show code
Date
Time
Datetime
Phone number
Phone number with prefix
US phone number
Card number
IP address

    <form>
        <div class="form-group">
            <label class="form-control-label">Date</label>
            <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="MM/DD/YYY">
        </div>
        <div class="form-group">
            <label class="form-control-label">Time</label>
            <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="hh:mm:ss">
        </div>
        <div class="form-group">
            <label class="form-control-label">Datetime</label>
            <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="MM/DD/YYY hh:mm:ss">
        </div>
        <div class="form-group">
            <label class="form-control-label">Phone number</label>
            <input type="text" class="form-control input-mask" data-mask="0000 000 000" placeholder="0720 444 555">
        </div>
        <div class="form-group">
            <label class="form-control-label">Phone number with prefix</label>
            <input type="text" class="form-control input-mask" data-mask="(00) 0000 0000" placeholder="(99) 5555 6666">
        </div>
        <div class="form-group">
            <label class="form-control-label">US phone number</label>
            <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="(99) 5555 6666">
        </div>
        <div class="form-group">
            <label class="form-control-label">Card number</label>
            <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="1234 5678 9012 3456">
        </div>
        <div class="form-group">
            <label class="form-control-label">IP address</label>
            <input type="text" class="form-control input-mask" data-mask="000.000.000.0000" placeholder="192.168.567.890">
        </div>
    </form>