个人中心
gpt4 book ai didi

javascript - 输入类型 ="date"在 Bootstrap 模式下不起作用

转载 作者：行者123 更新时间：2023-12-01 01:41:43 25 4
gpt4 key购买 nike

Iam using grails 2.4.4 and i'm using a bootstrap modal in my gsp page but the input type="date" is not working in that modal for mozilla browser. In Chrome it is fine

这是我的 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">&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>

有人可以帮我吗？

最佳答案

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

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

正如您从演示和文档中看到的那样，它非常通用，而且我在格式化它生成的日期时没有遇到任何问题，因此它可以与 Grails 提供的数据绑定(bind)很好地配合。

设置输入样式也轻而易举。

关于javascript - 输入类型 ="date"在 Bootstrap 模式下不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39241245/

25 4 0
文章推荐： Javascript ID 转换为变量 onchange
文章推荐： javascript - Elfinder 打开 PDF 而不是下载
文章推荐： Javascript JSON 未知行为
文章推荐： python - 解码为字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com