twitter-bootstrap jQuery 日期选择器未出现在 Firefox 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19363899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery datepicker doesn't appear in Firefox
提问by user1137313
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:
我有一个使用 FLAT UI KIT 的输入表单，它必须包含一个日期选择器，所以我选择使用 jQuery 的小部件。但是当我在 Chrome 中运行它时，日期选择器出现了，而在 Firefox 上它显示为一个简单的文本输入。这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My test · 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?
我该怎么做才能让它在 Firefox 中也能正常工作？
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.
同样在 Chrome 中，如何让日历在一天关闭 onClick？现在日历保持显示，直到我点击屏幕上的其他地方。
采纳答案by Irvin Dominin
The problem is not Firefox, you are defining:
问题不在于 Firefox，您正在定义：
- an input type=date with id
ui-datepicker - binding a jQuery UI datepicker to an id
datepicker
- 带有 id 的输入类型=日期
ui-datepicker - 将 jQuery UI 日期选择器绑定到 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)
第二个选择器不匹配任何元素，因此 jQuery UI 日期选择器未绑定到任何内容；通过使用 input type=date Chrome 会自动呈现日历控件，因此您会因输入类型而在 Chrome 中看到日历（请参阅https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec）
To fix the issue in all browser you can set input type=text in your ui-datepickerelement, and set the correct selector.
要在所有浏览器中解决此问题，您可以在ui-datepicker元素中设置 input type=text ，并设置正确的选择器。
Code:
代码：
$(document).ready(function () {
$("#ui-datepicker").datepicker();
});
回答by Abhimanyu
Date picker is working with firefox, but z-indexof datepicker is in "-". So it's not appearing in firefix browser.
Show update the z-indexof datepicker through jquery it will appear.
日期选择器正在使用 Firefox，但z-index日期选择器在“-”中。所以它没有出现在firefix浏览器中。z-index通过 jquery显示更新日期选择器它会出现。
$(".datepicker").css("z-index","100");
回答by CodeMaker
it will work on mozila firefox if is not working update your firefox version . i run this it works. thanks
如果无法更新您的 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>
in your body of the page use the input
在您的页面正文中使用输入
<input class="datepicker">
