New patient - phone input mask

resources/views/app/new-patient.blade.php

@@ -4,7 +4,7 @@
 
     <?php $patients = [1,2,3,4]; ?>
 
-    <div class="p-3 mcp-theme-1">
+    <div class="p-3 mcp-theme-1" id="newPatientContainer">
         <div class="col-12 col-lg-6 px-0">
             <div class="card d-block mb-3" moe="">
 
@@ -45,11 +45,11 @@
                         </div>
                         <div class='form-group mb-3'>
                             <label class='control-label'>Home Phone Number </label>
-                            <input class='form-control' type='tel' name='homeNumber'>
+                            <input class='form-control' stag-input-phone type='tel' name='homeNumber'>
                         </div>
                         <div class='form-group mb-3'>
                             <label class='control-label'>Cell Phone Number </label>
-                            <input class='form-control' type='tel' name='cellNumber'>
+                            <input class='form-control' stag-input-phone type='tel' name='cellNumber'>
                         </div>
                         <div class='form-group mb-3'>
                             <label class='control-label'>Email Address </label>
@@ -77,4 +77,14 @@
         </div>
     </div>
 
+    <script src="/inputmask-5.x/dist/inputmask.js"></script>
+    <script>
+        (function() {
+            function init() {
+                let im = new Inputmask("(999) 999-9999").mask('[stag-input-phone]');
+            }
+            addMCInitializer('new-patient', init, '#newPatientContainer');
+        }).call(window);
+    </script>
+
 @endsection