CODEWITHSUNDEEP
javascriptjqueryhtml
Dana Aquino
Dana Aquino

Reputation: 11

Jquery Input Date Mask Not Working

I've searched for other examples already but I just can't seem to get my date input mask to work. Tried to compare 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.com/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.

Upvotes: 1

Views: 7061

Answers (2)

Diego Benetti
Diego Benetti

Reputation: 117

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.

Upvotes: 0

DocSS
DocSS

Reputation: 124

As for 2017.11.03 they updated plugin, but not documentation: https://github.com/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.

Upvotes: 4

Related Questions