Question

我使用grails 2.4.4并且我在我的gsp页面中使用了bootstrap模式，但是输入类型=＆＃34; date＆＃34;不适用于mozilla浏览器的模式。在Chrome中它很好

这是我的gsp页面

＆＃13;

<!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">&times;</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>

＆＃13;

有人可以帮我吗？

Answer 1

我选择使用带有Grails 3.0.x项目的javascript库，而不是使用HTML5日期类型输入：

http://amsul.ca/pickadate.js/

它非常通用，你可以从演示和文档中看到，我在格式化它生成的日期时没有问题，因此它可以很好地与Grails提供的数据绑定。

设置输入样式也很简单。

Answer 2

我有一个小的grails-taglib-source，我曾经在我的grails-apps中使用jquery-datepicker。

您可能会发现它很有用......

grails-jquery-datepicker

我刚创建了github-repository，因此有可能缺少某些信息......

输入类型=＆＃34;日期＆＃34;在bootstrap模式中不起作用

2 个答案: