3
Iam using grails 2.4.4, и я использую bootstrap modal на моей странице gsp, но тип ввода = «дата» не работает в этом модале для браузер Mozilla. В Chrome это прекрасноТип ввода = «дата» не работает в bootstrap modal
Вот моя страница 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', {
\t types: 'date'
\t });
webshims.polyfill('forms forms-ext');
function timeoutDiv(){
clearFields();
setTimeout(function() {
\t $('#successMessage').fadeOut('slow');
\t $("#successMessage").html("");
\t $('#successMessage').fadeIn('slow');
\t }, 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)) {
\t 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{
\t 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{
\t 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>Может кто-нибудь помочь мне, пожалуйста?
см [совместимость] (http://caniuse.com/#feat=input-datetime) таблица –
http://stackoverflow.com/questions/22983013/how-to-get-html-5-input-type-date-working-in-firefox -and-or-ie-10 – beginner
Firefox не поддерживает тип даты. Используйте кросс-браузерную библиотеку, например, jQuery. – Khurram