我已经搜索了其他示例,但是我似乎无法让我的日期输入掩码工作。试图将我的代码与我从中获得的代码进行比较,但似乎找不到这里可能缺少的。
这是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>
预先感谢您。
至于2017.11.03他们更新了插件,但不更新文档:https://github.com/robinherbots/inputmask/blob/4.x/readme_date.md
所有别名将被1个通用DateTime别名替换 接受所需的DateTime格式的指定符。
我认为,所有已记录的日期别名均已删除。
当前版本的一种解决方案是将别名" dateTime"与其他参数'inputformat':'MM/dd/yyyy'这是我的工作示例:
<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'">
顺便说一句,我从此软件包中包括整个jquery.inputmask.bundle.js。
我知道这有点晚了,但也许它可以帮助其他打开此线程的人。
如果我了解您的问题,则日期存储在数据库中,例如2020-08-22
,您应用了掩码'00/00/0000'
,因此输入中的值是20/20/0822
,不是吗?
如果是这样,使其工作的键是将其放入输入的值属性之前格式化。
<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">
值属性内的三元属性是避免尝试格式化零值。
因此,当您将下面的蒙版应用于日期输入时,日期格式将与掩码的格式匹配,一切都将完美地工作。
$('#inputBirthdate').mask('00/00/0000');
我从Laravel项目中的刀片文件中取出了这个示例。