我有一个使用 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>
我该怎么做才能让它在 Firefox 中也能正常工作？
同样在 Chrome 中，我怎样才能让日历在某一天关闭 onClick？现在日历会一直显示，直到我点击屏幕上的其他地方。
最佳答案
问题不在于 Firefox，您正在定义:
- 输入 type=date with id
ui-datepicker - 将 jQuery UI 日期选择器绑定(bind)到一个 id
datepicker
第二个选择器不匹配任何元素，所以 jQuery UI 日期选择器没有绑定(bind)到任何东西；通过使用 input type=date Chrome 会自动呈现一个日历控件，因此由于输入类型，您会在 Chrome 中看到一个日历(请参阅。https://plus.google.com/+GoogleChromeDevelopers/posts/hTcMLVNKnec)
要解决所有浏览器中的问题，您可以在 ui-datepicker 元素中设置 input type=text，并设置正确的选择器。
代码:
$(document).ready(function () {
$("#ui-datepicker").datepicker();
});
关于jquery-ui - jQuery datepicker 没有出现在 Firefox 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19363899/