Bootstrap 4 Advanced Components : Input mask

Bootstrap 4 Advanced Components : Input masks

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/css/inputmask.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/jquery.inputmask.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Input mask for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <p>
          Dependencies : jQuery and <a href="https://github.com/RobinHerbots/Inputmask" target="_blank">Input mask plugin</a> (5.0.0-beta 87)<br> An equivalent plugin is <a href="https://github.com/jaridmargolin/formatter.js" target="_blank">Formatter</a>.
        </p>
        <p>
          Works with input type="text", "search", "tel", "password", &lt;textarea&gt;, &lt;div contenteditable="true"&gt;<br> Try the demos below
        </p>
        <h2>
          Demo
        </h2>
        <form role="form" id="my-form">
          <div class="form-group">
            <label for="date">Date (French)</label>
            <input type="text" class="form-control" id="date" name="date" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-inputmask-placeholder="jj/mm/aaaa">
          </div>
          <div class="form-group">
            <label for="time">Time (12h)</label>
            <input type="text" class="form-control" id="time" name="time"...

JavaScript

// Initialize InputMask
$('input').inputmask();