[英]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.