Jquery输入日期掩码不起作用

时间:2017-06-24 05:08:23

标签: javascript jquery html

我已经搜索了其他示例,但我似乎无法使用我的日期输入掩码。试图将我的代码与我所获得的代码进行比较,但似乎无法找到可能缺少的代码。

以下是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>

这里是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>

提前谢谢。

2 个答案:

答案 0 :(得分:3)

至于2017.11.03,他们更新了插件,但没有更新文档: https://github.com/RobinHerbots/Inputmask/blob/4.x/README_date.md

  

所有别名都将被1个通用日期时间别名替换   接受所需日期时间格式的说明符。

我认为,所有记录的日期别名已被删除。

当前版本的解决方案是使用别名&#39; datetime&#39;附加参数&#39; inputFormat&#39;:&#39; mm / dd / yyyy&#39; 这是我的工作示例:

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

因此,对于您的任务,您可以使用:

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

BTW,我在这个软件包中包含了整个jquery.inputmask.bundle.js。

答案 1 :(得分:0)

我知道这有点晚了,但是也许可以帮助其他打开此线程的人。

如果我了解您的问题,那么日期就这样存储在2020-08-22这样的数据库中,并且您应用了掩码'00/00/0000',因此输入中的值为20/20/0822,不是吗? ?

如果是这样,使它起作用的关键是在将值放入输入的value属性之前对其进行格式化。

<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">

value属性中的三元数是为了避免尝试格式化空值。

因此,当您将以下蒙版应用于日期输入时,日期格式将与蒙版的格式匹配,并且一切都会正常进行。

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

我从laravel项目的刀片文件中取出了这个示例。