Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Requires JS.
assets/js/vendors/cleave-function.js
Note that this component requires the use of the third-party cleave.js plugin.

Credit card

<div class="mb-3">
<label for="cc-mask" class="form-label">Credit card number</label>
<input type="text" class="form-control input-credit-card" id="cc-mask" placeholder="xxxx-xxxx-xxxx-xxxx" required="" />
</div>

Phone number

<div class="mb-3">
<label for="phone" class="form-label">Phone number</label>
<input type="text" class="form-control input-phone" id="phone" placeholder="+1 4XX XXX XXXX" required="" />
</div>

Date formatting

<div class="mb-3">
<label for="dateMonth" class="form-label">Date</label>
<input type="text" class="form-control input-date-formatting" id="dateMonth" placeholder="YYYY-MM-DD" required="" />
</div>
<div class="mb-3">
<label for="dateMonthOne" class="form-label">Date</label>
<input type="text" class="form-control input-date-formate" id="dateMonthOne" placeholder="MM/YY" required="" />
</div>

Time formatting

<div class="mb-3">
<label for="timeMonth" class="form-label">Time</label>
<input type="tel" class="form-control input-time-formatting" id="timeMonth" placeholder="HH:MM:SS" required="" />
</div>
<div class="mb-3">
<label for="timeMonthOne" class="form-label">Time</label>
<input type="tel" class="form-control input-time-formate" id="timeMonthOne" placeholder="HH:MM" required="" />
</div>

Numeral formatting

<div class="mb-3">
<label for="numeral" class="form-label">Numeral formatting</label>
<input type="text" class="form-control input-numeral-formatting" id="numeral" placeholder="Enter numeral" required />
</div>

Custom options

<div class="mb-3">
<label for="block" class="form-label">Block option</label>
<input type="text" class="form-control input-block" id="block" placeholder="Blocks: [4, 3, 3, 4]" required />
</div>
<div class="mb-3">
<label for="delimiter" class="form-label">Delimiter option</label>
<input type="text" class="form-control input-delimiter" id="delimiter" placeholder="Delimiter: '.'" required />
</div>
<div class="mb-3">
<label for="delimiters" class="form-label">Delimiters option</label>
<input type="text" class="form-control input-delimiters" id="delimiters" placeholder="Delimiter: '.''.''-'" required />
</div>
<div class="mb-3">
<label for="prefix" class="form-label">Prefix option</label>
<input type="text" class="form-control input-prefix" id="prefix" placeholder="PRFIX" required />
</div>