Input Mask
Falcon uses inputmask for advance input masking. Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.
Documentation for inputmaskInputmask Examples
<div class="mb-3">
<label class="form-label" for="dateInputmask">Date</label>
<input class="form-control" id="dateInputmask" data-input-mask='{"alias":"datetime","inputFormat":"dd/mm/yyyy"}' placeholder="DD/MM/YYYY" type="text" />
</div>
<div class="mb-3">
<label for="time24Inputmask">Time (24-hour format)</label>
<input class="form-control" id="time24Inputmask" data-input-mask='{"alias":"datetime","inputFormat":"HH:MM:ss","hourFormat":24}' placeholder="HH:MM:SS" type="text" />
</div>
<div class="mb-3">
<label for="time12Inputmask">Time (12-hour format)</label>
<input class="form-control" id="time12Inputmask" data-input-mask='{"alias":"datetime","inputFormat":"HH:MM:ss TT","hourFormat":12}' placeholder="HH:MM:SS TT" type="text" />
</div>
<div class="mb-3">
<label for="usPhoneInputmask">US Phone Number</label>
<input class="form-control" id="usPhoneInputmask" data-input-mask='{"mask":"+1 999-999-9999"}' placeholder="+1 XXX-XXX-XXXX" type="tel" />
</div>
<div class="mb-3">
<label for="telephoneInputmask">US Telephone</label>
<input class="form-control" id="telephoneInputmask" data-input-mask='{"mask":"(999) 999-9999"}' placeholder="(XXX) XXX-XXXX" type="tel" />
</div>
<div class="mb-3">
<label for="currencyInputmask">Currency (maximum 999.99)</label>
<input class="form-control" id="currencyInputmask" data-input-mask='{"alias":"decimal","digits":2,"rightAlign":false,"max":999.99,"jitMasking":false,"prefix":"$"}' placeholder="$999.99" type="text" />
</div>
<div class="mb-3">
<label for="creditCardInputmask">Credit Card</label>
<input class="form-control" id="creditCardInputmask" data-input-mask='{"mask":"9999 9999 9999 9999"}' placeholder="XXXX XXXX XXXX XXXX" type="text" />
</div>
<div class="mb-3">
<label for="urlInputmask">URL</label>
<input class="form-control" id="urlInputmask" data-input-mask='{"alias":"url","casing":"lower"}' placeholder="https://abc.com" type="text" />
</div>
<div class="mb-3">
<label for="zipcodeInputmask">ZIP Code</label>
<input class="form-control" id="zipcodeInputmask" data-input-mask='{"mask":"99999-999"}' placeholder="XXXXX-XXX" type="text" />
</div>
<div class="mb-3">
<label for="ipInputmask">IP Address</label>
<input class="form-control" id="ipInputmask" data-input-mask='{"mask":"999.99.99.99"}' placeholder="XXX.XX.XX.XX" type="text" />
</div>
Javascript
<script src="vendors/inputmask/inputmask.min.js"></script>