tabler-ui/src/_includes/cards/form-input-mask.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-header">
		<h3 class="card-title">Input mask</h3>
	</div>
	<div class="card-body">
		<div class="form-group">
			<label class="form-label">Date</label>
			<input type="text" name="field-name" class="form-control" data-mask="00/00/0000" data-mask-clearifnotmatch="true" placeholder="00/00/0000" />
		</div>

		<div class="form-group">
			<label class="form-label">Hour</label>
			<input type="text" name="field-name" class="form-control" data-mask="00:00:00" data-mask-clearifnotmatch="true" placeholder="00:00:00" />
		</div>

		<div class="form-group">
			<label class="form-label">Date & Hour</label>
			<input type="text" name="field-name" class="form-control" data-mask="00/00/0000 00:00:00" data-mask-clearifnotmatch="true" placeholder="00/00/0000 00:00:00" />
		</div>

		<div class="form-group">
			<label class="form-label">ZIP Code</label>
			<input type="text" name="field-name" class="form-control" data-mask="00000-000" data-mask-clearifnotmatch="true" placeholder="00000-000" />
		</div>

		<div class="form-group">
			<label class="form-label">Money</label>
			<input type="text" name="field-name" class="form-control" data-mask="000.000.000.000.000,00" data-mask-reverse="true" />
		</div>

		<div class="form-group">
			<label class="form-label">Telephone</label>
			<input type="text" name="field-name" class="form-control" data-mask="0000-0000" data-mask-clearifnotmatch="true" placeholder="0000-0000" />
		</div>

		<div class="form-group">
			<label class="form-label">Telephone with Code Area</label>
			<input type="text" name="field-name" class="form-control" data-mask="(00) 0000-0000" data-mask-clearifnotmatch="true" />
		</div>

		<div class="form-group">
			<label class="form-label">IP Address</label>
			<input type="text" name="field-name" class="form-control" data-mask="099.099.099.099" data-mask-clearifnotmatch="true" placeholder="000.000.000.000" />
		</div>
	</div>
</div>

<script>
    require(['input-mask']);
</script>