输入类型=“日期”在引导模式下不起作用
Posted
技术标签:
【中文标题】输入类型=“日期”在引导模式下不起作用【英文标题】：input type="date" is not working in bootstrap modal 【发布时间】：2017-01-07 13:12:37 【问题描述】：我正在使用 grails 2.4.4，并且我在我的 gsp 页面中使用引导模式，但输入 type="date" 在 mozilla 浏览器的模式中不起作用。在 Chrome 中没问题
这是我的 gsp 页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>UtilityApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script type="text/javascript">
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext',
types: 'date'
);
webshims.polyfill('forms forms-ext');
function timeoutDiv()
clearFields();
setTimeout(function()
$('#successMessage').fadeOut('slow');
$("#successMessage").html("");
$('#successMessage').fadeIn('slow');
, 5000);
function clearElements(el)
el=$(el).find("input,select").not("input[type='submit']");
for (var i = 0; i < el.length; i++)
el[i].value = "";
clearElements(el[i].children);
function clearFields()
clearElements($('#formContent'));
function isNumberKey(evt)
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
evt.preventDefault();
function isAlphaNumeric(evt)
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode==08 || charCode==127 || charCode>47 && charCode<58 || charCode>64 && charCode<91 || charCode>96 && charCode<123)
else
evt.preventDefault();
function isFloatKey(evt)
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode==08 || charCode==127 || charCode==46 || charCode>47 && charCode<58)
else
evt.preventDefault();
</script>
<style>
.modal-header
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #bababa;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
.modal-body
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #d7eded;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
</style>
</head>
<body>
<div class="container">
<h2>Enter the food bill details</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter the food bill details</h4>
</div>
<div class="modal-body">
<div id="successMessage" style="text-align:center;"></div>
<g:formRemote name="dataEntryForm" class="form-horizontal" update="successMessage" onComplete="timeoutDiv()" url="[controller: 'DataEntry', action:'saveAjax']">
<div class="form-group">
<label class="control-label col-sm-5" for="employee_id">EmployeeID:</label>
<div class="col-sm-5">
<g:textField name='employee_id' required id='employee_id' onkeypress="isAlphaNumeric(event)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="team">Team:</label>
<div class="col-sm-5">
<g:select name='team' required id='team' from="$['Java','Dotnet', 'QA', 'Database']"
noSelection="['':'---select---']"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="receipt_dt">Receipt Date:</label>
<div class="col-sm-5">
<input type="date" name='receipt_dt' required id='receipt_dt'/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="restaurant_name">Restaurant Name:</label>
<div class="col-sm-5">
<g:textField name='restaurant_name' required id='restaurant_name'/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="number_of_persons">Number of Persons:</label>
<div class="col-sm-5">
<g:textField name='number_of_persons' required id='number_of_persons' maxlength="3" onkeypress="isNumberKey(event)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="amount">Amount:</label>
<div class="col-sm-5">
<g:textField name='amount' required id='amount' onkeypress="isFloatKey(event)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5" for="bill_submitted_dt">Bill Submitted Date:</label>
<div class="col-sm-5">
<input type="date" name='bill_submitted_dt' required id='bill_submitted_dt'/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-5">
<button type="submit" class="btn btn-info btn-lg">Submit</button>
</div>
</div>
</g:formRemote>
</div></div>
</div>
</div>
</div>
</body>
</html>谁能帮帮我？
【问题讨论】：
见compatibility表 ***.com/questions/22983013/… Firefox 不支持日期类型。在其他任何东西上使用像 jQuery 这样的跨浏览器库。 【参考方案1】：我选择使用带有 Grails 3.0.x 项目的 javascript 库，而不是使用 HTML5 日期类型输入：
http://amsul.ca/pickadate.js/
正如您从演示和文档中看到的那样，它非常通用，我在格式化它生成的日期时没有问题，因此它可以很好地与 Grails 提供的数据绑定配合使用。
为输入设置样式也是轻而易举的事。
【讨论】：
【参考方案2】：我有一个小的 grails-taglib-source，我曾经将 jquery-datepicker 与我的 grails-apps 一起使用。
您可能会发现它很有用...
grails-jquery-datepicker
我刚刚创建了 github-repository，因此可能缺少某些信息...
【讨论】：
以上是关于输入类型=“日期”在引导模式下不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Jquery 选择器在引导模式下不起作用（使用 codeigniter 加载表单）