### 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 inputmask

##### Inputmask Examples

Date
Time (24-hour format)
Time (12-hour format)
US Phone Number
US Telephone
Currency (maximum 999.99)
Credit Card
URL
ZIP Code
IP Address

    <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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize