jQuery datepicker不会出现在Firefox中 [英] jQuery datepicker doesn't appear in Firefox

问题描述

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

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
< title>我的测试& middot;用datepicker< / title> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
 
 <！ -  Loading Bootstrap  - > 
< link href =bootstrap / css / bootstrap.css =stylesheet> 
< link href =bootstrap / css / prettify.css =stylesheet> 
 
<！ - 加载平面UI  - > 
< link href =css / flat-ui.css =stylesheet> 
< link href =css / docs.css =stylesheet> 
 
< link rel =快捷图标href =images / favicon.ico> 
<！ - 我的日期选择器jQuery UI  - > 
< link rel =stylesheethref =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-attachment：scroll; 
} 
 .titluedit {
 margin：0 0 0 0; 
 font-size：14px; 
} 
 
 .titlueditx {
 margin：0 0 0 0; 
 font-size：14px; 
颜色：红色; 
} 
 
 fieldset {margin：0 0 10px 0; } 
< / style> 
 
< script> 
< / script> 
 
< script> 
 $（#datepicker）.datepicker（）; 
}）; $ b（document）.ready（function（）{
 $ $ b}）; 
 
< / script> 
 
< / head> 
< body> 
< img src =images / logo2.pngalt =logoxheight =81width =305> 
< h1 class =demo-panel-titlestyle =text-align：center; color：＃d35400> XXXXXXXXX< / h1> 
 
 
< div class =containerstyle =width：900px; margin：0 auto;> 
< form action =save.phpmethod =post> 
< div class =containerstyle =width：700px; margin：0 auto;> 
< fieldset> 
< p class =titlueditx>名称*：< / p> 
< input type =textname =numevalue =placeholder =Nameclass =form-control/> 
< / fieldset> 
 
< fieldset> 
< p class =titlueditx>中等时间*：< / p> 
< input type =textname =duratavalue =placeholder =minutesclass =form-control/> 
< / fieldset> 
 
< p class =titlueditx>开始日期*：< / p> 
< input type =dateid =ui-datepickername =dataangvalue =class =form-control/>< br> 
 
< fieldset> 
< p class =titlueditx>其他一些东西*：< / p> 
< input type =textname =sefutzulvalue =placeholder =其他相关内容class =form-control/> 
< / fieldset> 
 
< / div> 
 
< br>< br> 
< div class =containerstyle =width：700px; margin：0 auto;> 
< table> 
< tr> 
< td> 
< input type =hiddenid =idhidfirmaname =idfirmavalue =1/> 
< input type =hiddenid =idhnumefirmaname =numefirmavalue =xxxxx/> 
< button type =submitclass =btn btn-hg btn-primary>保存信息< / button> 
 
< / form> 
< / td> 
< td> 
< form action =mylist.phpmethod =post> 
< INPUT TYPE =hiddenNAME =idfirmavalue =1> 
< INPUT TYPE =hiddenNAME =numefirmavalue =xxxxx> 
< button type =submitclass =btn btn-hg btn-danger>取消< /按钮> 
< / form> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 
 
 
 
< / body>< / html> 
  

我可以做些什么使它在Firefox TOO中工作？

另外在Chrome中，我怎样才能使日历关闭onClick一天？现在，日历保持显示，直到我点击屏幕上的其他地方。

解决方案

问题不是Firefox，你正在定义：

1. 输入类型=日期，ID ui-datepicker


2. 将jQuery UI日期选择器绑定到ID datepicker

第二个选择器不匹配任何元素，所以jQuery UI datepicker没有绑定到任何东西;通过使用输入类型=日期，Chrome会自动呈现日历控件，因此您会在Chrome中看到日历，因为它的输入类型（请参见 https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec ）

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

  $（document）.ready（function（）{
 $（＃ui-datepicker）。datepicker （）; 
}）; 
  

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

I have an input form using FLAT UI KIT that MUST contain a datepicker, so I chose to use jQuery's widget. But when I run it in Chrome the datepicker shows up, whilet on Firefox it is shows as a simple text input. Here is my code:

 <!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>                

What can I do to make it work in Firefox TOO?

Also in Chrome how can I make the calendar to close onClick on a day? Right now the calendar stays shown until i click somewhere else on the screen.

解决方案

The problem is not Firefox, you are defining:

1. an input type=date with id ui-datepicker
2. binding a jQuery UI datepicker to an id datepicker

The 2nd selector not match any element so the jQuery UI datepicker is not binded to anything; by using an input type=date Chrome renders automatically a calendar control, so you see a calendar in Chrome because of the input type (see. https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec)

To fix the issue in all browser you can set input type=text in your ui-datepicker element, and set the correct selector.

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/zAKQe/

这篇关于jQuery datepicker不会出现在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！