Inputmask Example

<!-- date format -->
<div class="form-group">
 <label>Date</label>
 <input id="inputmask_1"  class="form-control" />
 <small><span class="text-muted">Custom date format:</span><span class="text-danger"> mm/dd/yyyy</span></small>
</div>


//dateformat
<script>
 $("#inputmask_1").inputmask("99/99/9999", {
  removeMaskOnSubmit: true,
  "placeholder": "dd/mm/yyyy"
});
</script>


<!--Custom Placeholder-->
<div class="form-group">
 <label>Custom Placeholder</label>
 <input id="inputmask_2"  class="form-control" />
 <small><span class="text-muted">Custom mask with placeholder:</span><span class="text-danger"> mm/dd/yyyy</span></small>
</div>


// custom placeholder 
<script>
$("#inputmask_2").inputmask("99/99/9999", {
 "placeholder": "*"
});
</script>


<!-- Phone Number -->
<div class="form-group">
 <label>Phone Number</label>
 <input id="inputmask_3"  class="form-control" />
 <small><span class="text-muted">Phone number mask:</span><span class="text-danger"> (999) 999-9999 </span></small>
</div>


<script>
 // phone number 
  $("#inputmask_3").inputmask("mask", {
     "mask": "(999) 999-9999"
  }); 
</script>
<!--empty-placeholder-->
<div class="form-group">
 <label>Empty Placeholder</label>
 <input id="inputmask_4"  class="form-control" />
 <small><span class="text-muted">Phone number mask:</span><span class="text-danger"> 99-9999999</span></small>
</div>


<script>
// empty placeholder
$("inputmask_4").inputmask({
    "mask": "99-9999999",
    placeholder: "" // remove underscores from the input mask
});
</script>

Inputmask Example 2

<!-- Repeating Mask -->
<div class="form-group">
 <label>Repeating Mask</label>
 <input id="inputmask_5"  class="form-control" />
 <small><span class="text-muted">Mask:</span><span class="text-danger"> 9999999999</span></small>
</div>


// repeating mask
<script>
$("#inputmask_5").inputmask({
 "mask": "9",
 "repeat": 10,
 "greedy": false
}); // ~ mask "9" or mask "99" or ... mask "9999999999"  
</script>


<!-- Right Align -->
<div class="form-group">
 <label>Right Align</label>
 <input id="inputmask_6"  class="form-control" />
 <small class="text-muted">Right aligned numeric mask</small>
</div>


// Right Align
<script>
 $("#inputmask_6").inputmask("decimal", {
    rightAlignNumerics: false
});
</script>


<!--Currency-->
<div class="form-group">
 <label>Currency</label>
 <input id="inputmask_7"  class="form-control" />
 <small><span class="text-muted">Currency Format:</span><span class="text-danger">$ ___.__1.234,56 </span></small>
</div>


// currency format
<script>
$("#inputmask_7").inputmask("$‚¬ 999.999.999,99", {
 numericInput: true
}); //123456  =>  $‚¬ ___.__1.234,56
</script>


<!--IP Address-->
<div class="form-group">
 <label>IP Address</label>
 <input id="inputmask_8"  class="form-control" />
</div>


//ip address
<script>
 $("#inputmask_8").inputmask({
  "mask": "999.999.999.999"
});
</scipt>


<!--Email Address -->
<div class="form-group">
 <label>Email Address</label>
 <input id="inputmask_9"  class="form-control" />
</div>


// email address
<script>
  $("#inputmask_9").inputmask({
    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
        pastedValue = pastedValue.toLowerCase();
        return pastedValue.replace("mailto:", "");
    },
    definitions: {
        "*": {
            validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~-]",
            cardinality: 1,
            casing: "lower"
        }
    }
   });
</script>