我正在尝试添加datepicker日历。但是它不可见。
以下是我的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1"><title>jQuery UI Datepicker - Select a Date
Range</title<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js" </script>
<script>
$('#date1').datepicker({ maxDate: '+0d', changeMonth: true, numberOfMonths: 1, onClose: function (selectedDate) {
$('#date2').datepicker("option", "minDate", selectedDate);
setTimeout(function () {
$('#date2').focus();
}, 100);
} }); $('#date2').datepicker({
maxDate: '+0d',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$('#date1').datepicker("option", "maxDate", selectedDate);
} }); </script> </head> <body>
<header>
<h3>Bhutan Trip planner</h3>
</header>
<div class="tableoptions"> <span class="field">
<label for="fromdate">From:</label>
<input id="date1" name='fromdate' type="text" class="width75" />
</span> <span class="field">
<label for="todate">To:</label>
<input id="date2" name='todate' type="text" class="width75" />
</span> </div> </body> </html>
提前感谢!
答案 0 :(得分:0)
以下是您的代码的一个工作示例,它确实有效:https://jsfiddle.net/Twisty/dsn9t5g3/
这是您的代码,稍加清理:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$(function(){
$('#date1').datepicker({
maxDate: '+0d',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$('#date2').datepicker("option", "minDate", selectedDate);
setTimeout(function () {
$('#date2').focus();
}, 100);
}
});
$('#date2').datepicker({
maxDate: '+0d',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$('#date1').datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</head>
<body>
<header>
<h3>Bhutan Trip planner</h3>
</header>
<div class="tableoptions">
<span class="field">
<label for="fromdate">From:</label>
<input id="date1" name='fromdate' type="text" class="width75" />
</span>
<span class="field">
<label for="todate">To:</label>
<input id="date2" name='todate' type="text" class="width75" />
</span>
</div>
</body>
</html>
您有一些标签未正确关闭,可能会导致代码中断。
另外,你没有提出问题。无法知道这是否是你想要的。