[英]Jquery Input Date Mask Not Working
我已经搜索了其他示例,但我似乎无法让我的日期输入掩码正常工作。 试图将我的代码与我从中获得的代码进行比较,但似乎无法找到此处可能缺少的内容。
这是 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' 和附加参数 '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
,不是吗?
如果是这样,使其工作的关键是在将值放入输入的 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 项目中的刀片文件中取出了这个例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.