jQuery datepicker 没有出现在 Firefox 中答案

【问题标题】：jQuery datepicker doesn't appear in FirefoxjQuery datepicker 没有出现在 Firefox 中
【发布时间】：2013-10-14 15:36:51
【问题描述】：

我有一个使用 FLAT UI KIT 的输入表单，它必须包含一个日期选择器，所以我选择使用 jQuery 的小部件。但是当我在 Chrome 中运行它时，日期选择器会显示出来，而在 Firefox 上它显示为一个简单的文本输入。这是我的代码：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My test &middot; stuff with datepicker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/prettify.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">
    <!--  my addition jQuery UI for datepicker -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="bootstrap/js/google-code-prettify/prettify.js"></script>
    <script src="js/application.js"></script>                

    <style>
           .containerx {
        background-color: #1abc9c;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-attachment: scroll;
        }      
        .titluedit{
        margin: 0 0 0 0;
        font-size:14px;
        }

        .titlueditx{
        margin: 0 0 0 0;
        font-size:14px;
        color:red;
        }

        fieldset { margin: 0 0 10px 0; }
    </style>

    <script>
    </script>

    <script>
            $(document).ready(function(){
                $(function() {
                    $( "#datepicker" ).datepicker();
                });    
            });    

    </script>    

  </head>
  <body>
  <img src="images/logo2.png" alt="logox" height="81" width="305"> 
        <h1 class="demo-panel-title" style="text-align:center; color:#d35400">XXXXXXXXX</h1>
        <h3 class="demo-panel-title" style="text-align:center; color:#1abc9c">New info</h3>

       <div class="container" style="width:900px; margin:0 auto;"> 
<form action="save.php" method="post">
            <div class="container" style="width:700px; margin:0 auto;"> 
                    <fieldset>
                    <p class="titlueditx">Name *:</p>
                    <input type="text" name="nume" value="" placeholder="Name" class="form-control" />
                    </fieldset>

                    <fieldset>
                        <p class="titlueditx">Medium time *:</p>
                        <input type="text" name="durata" value="" placeholder="minutes" class="form-control" />
                    </fieldset>

                        <p class="titlueditx">Start date  *:</p>
                        <input type="date" id="ui-datepicker" name="dataang" value="" class="form-control"/><br>

                    <fieldset>
                        <p class="titlueditx">Some other stuff *:</p>
                        <input type="text" name="sefutzul" value="" placeholder="Other relevant stuff" class="form-control" />
                    </fieldset>

            </div>

  <br><br>
    <div class="container" style="width:700px; margin:0 auto;"> 
        <table>
            <tr>
                <td>      
                    <input type="hidden" id="idhidfirma" name="idfirma" value="1" />       
                    <input type="hidden" id="idhnumefirma" name="numefirma" value="xxxxx" />       
                    <button type="submit" class="btn btn-hg btn-primary">        Save info      </button>  

</form>
                </td>
        <td>  
            <form action="mylist.php" method="post">                    
                <INPUT TYPE="hidden" NAME="idfirma" value="1">                     
                <INPUT TYPE="hidden" NAME="numefirma" value="xxxxx">             
                <button type="submit" class="btn btn-hg btn-danger">              Cancel            </button>  
            </form>
        </td>
    </tr>
           </table>
      </div>
    </div>      



</body></html>

我该怎么做才能让它在 Firefox TOO 中工作？

在 Chrome 中，我怎样才能让日历在某一天关闭 onClick？现在日历一直显示，直到我单击屏幕上的其他位置。

【问题讨论】：

能否在 jsfiddle 上提供该问题的演示？
是的......这是我的问题的一个演示。我没有将 bootstrap.js 包含在其中，但行为仍然相同 jsfiddle.net/ZFJc6 ，因此请尝试从 Firefox 访问小提琴，然后从 chrome 访问。在 chrome 中，日期编辑将显示一个日期选择器，而 firefox 将仅显示一个简单的文本输入框
或者更好（更精简的版本）jsfiddle.net/ZFJc6/5

标签： jquery-ui firefox twitter-bootstrap jquery-ui-datepicker

【解决方案1】：

问题不在于 Firefox，您正在定义：

输入类型=ID 为ui-datepicker 的日期
将 jQuery UI 日期选择器绑定到 id datepicker

第二个选择器不匹配任何元素，因此 jQuery UI 日期选择器没有绑定到任何东西；通过使用 input type=date Chrome 会自动呈现一个日历控件，因此由于输入类型，您会在 Chrome 中看到一个日历（请参阅。https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec）

要解决所有浏览器中的问题，您可以在 ui-datepicker 元素中设置 input type=text，并设置正确的选择器。

代码：

 $(document).ready(function () {
     $("#ui-datepicker").datepicker();
 });

演示：http://jsfiddle.net/IrvinDominin/zAKQe/

【讨论】：

非常感谢。我放在 jsfiddle 中的代码是 2 个单独的测试组合成一个代码的结果......我忽略了 id :(。谢谢

【解决方案2】：

日期选择器正在使用 firefox，但日期选择器的 z-index 位于“-”中。所以它没有出现在firefix浏览器中。通过jquery显示更新datepicker的z-index就会出现。

$(".datepicker").css("z-index","100");

【讨论】：

【解决方案3】：

如果无法更新您的 firefox 版本，它将在 mozila firefox 上工作。我运行它它有效。谢谢

<head>
  <meta charset="UTF-8" />
  <title>Datepicker fadein</title>
  <link  href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <script type="text/javascript">
        $(function(){
            $('.datepicker').datepicker({showAnim: "fadeIn"});
        })
 </script>

在您的页面正文中使用输入

<input class="datepicker">

【讨论】：