I've searched for other examples already but I just can't seem to get my date input mask to work. Tried to pare my code with the one I've got it from but can't seem to find what could be missing here.

Here is the code for the HTML:

     <td> <div class="form-group">
     <div class="input-group">
     <div class="input-group-addon">
     <i class="fa fa-calendar"></i>
     </div>
      <input type="text" class="form-control" data-inputmask="'alias': 
    'dd/mm/yyyy'" data-mask>
             </div>
             </div></td>

Here's the code for the javascript:

    <!-- jQuery 2.2.3 -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js">
    </script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.js"></script>
    <!-- Select2 -->
    <script src="plugins/select2/select2.full.min.js"></script>

    <!-- InputMask -->
    <script src="plugins/input-mask/jquery.inputmask.js"></script>
    <script src="plugins/input-
     mask/jquery.inputmask.date.extensions.js"></script>
   <script src="plugins/input-mask/jquery.inputmask.extensions.js">
   </script>
    <!-- date-range-picker -->
    <script src=".js/2.11.2/moment.min.js"></script>
    <script src="plugins/daterangepicker/daterangepicker.js"></script>    
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- page script -->
    <script>
    $(function () {
    //Initialize Select2 Elements
   $(".select2").select2();
    //Datemask dd/mm/yyyy
   $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
  //Datemask2 mm/dd/yyyy
  $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": 
 "mm/dd/yyyy"});
  $("#example1").DataTable();
  $('#example2').DataTable({
  "paging": false,
  "lengthChange": false,
  "searching": false,
  "ordering": false,
  "info": false,
  "autoWidth": true
    });

   });
    </script>

Thank you in advance.

I've searched for other examples already but I just can't seem to get my date input mask to work. Tried to pare my code with the one I've got it from but can't seem to find what could be missing here.

Here is the code for the HTML:

     <td> <div class="form-group">
     <div class="input-group">
     <div class="input-group-addon">
     <i class="fa fa-calendar"></i>
     </div>
      <input type="text" class="form-control" data-inputmask="'alias': 
    'dd/mm/yyyy'" data-mask>
             </div>
             </div></td>

Here's the code for the javascript:

    <!-- jQuery 2.2.3 -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js">
    </script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.js"></script>
    <!-- Select2 -->
    <script src="plugins/select2/select2.full.min.js"></script>

    <!-- InputMask -->
    <script src="plugins/input-mask/jquery.inputmask.js"></script>
    <script src="plugins/input-
     mask/jquery.inputmask.date.extensions.js"></script>
   <script src="plugins/input-mask/jquery.inputmask.extensions.js">
   </script>
    <!-- date-range-picker -->
    <script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="plugins/daterangepicker/daterangepicker.js"></script>    
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- page script -->
    <script>
    $(function () {
    //Initialize Select2 Elements
   $(".select2").select2();
    //Datemask dd/mm/yyyy
   $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
  //Datemask2 mm/dd/yyyy
  $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": 
 "mm/dd/yyyy"});
  $("#example1").DataTable();
  $('#example2').DataTable({
  "paging": false,
  "lengthChange": false,
  "searching": false,
  "ordering": false,
  "info": false,
  "autoWidth": true
    });

   });
    </script>

Thank you in advance.

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 24, 2017 at 5:36 Dana Aquino asked Jun 24, 2017 at 5:08 Dana AquinoDana Aquino 1111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As for 2017.11.03 they updated plugin, but not documentation: https://github./RobinHerbots/Inputmask/blob/4.x/README_date.md

All aliases will be replaced by 1 generic datetime alias which can accept a specifier for the desired datetime format.

I think, all documented date aliases were removed already.

A solution for current version is to use alias 'datetime' with additional parameter 'inputFormat': 'mm/dd/yyyy' Here is my working example:

<input name="birtdaydate" type="text" placeholder="MM/DD/YYYY" data-inputmask="'alias': 'datetime','inputFormat': 'mm/dd/yyyy'">

So, for your task you can use:

<input type="text" class="form-control" data-inputmask="'alias': 'datetime','inputFormat': 'dd/mm/yyyy'">

BTW, I'm including whole jquery.inputmask.bundle.js from this package.

I know it's a little late, but maybe it helps other people who open this thread.

if I understood your issue, the date was stored in the database like this 2020-08-22 and you applied the mask '00/00/0000' so the value in the input was 20/20/0822, isn't it?

If so, the key the make it work is to format the value before you put it into the input's value property.

<input type="text" class="form-control" id="inputBirthdate" name="birthdate" value="{{ $p->birthdate ? $p->birthdate->format('d/m/Y') : $p->birthdate }}" placeholder="dd/mm/aaaa">

The ternary inside the value property is to avoid trying to format a null value.

So, when you apply the mask below to the date input, the date format will match the format of the mask and everything is gonna work perfectly.

$('#inputBirthdate').mask('00/00/0000');

I took this example out of a blade file in a laravel project.