嗨我想在我的网页中加入日历，谷歌搜索后我找到了这段代码
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<table>
<tr>
<td>
DOB</td><td> <input id="datepicker" readonly/></td>
</tr>
</table>
</body>
</html>
现在我想在我的网页中添加这个。在我写的头脑中
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
并在输入字段中写道 但是当我点击该字段时，日历不会打开。如果您需要我的完整代码，那么它如下所示
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body> <script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="#article1">Personal Information</a></li>
<li><a href="#article2">Medical History</a></li>
<li><a href="#article3">Insurance Information</a></li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Personal Information</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<input type="text" name="lastname" id="twoo" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input id="datepicker" readonly/>
</td>
</tr>
<tr>
<td height="30">
<b>Gender</b>
</td>
<td >
Male<input type="radio" name="lastname" value="male"/>
Female<input type="radio" name="lastname" value="male"/>
</td>
</tr>
<tr>
<td height="30">
<b>Occupation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Race</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Mobile</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Height</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Weight</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>BP</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Blood Group</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Medical History</h2>
<div class="line"></div>
<div class="articleBody clear"><!--
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div> -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Diabetes</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Insulin</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Obesity</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Hypertension</b>
</td>
<td >
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pancreatis</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Renal Problems</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Neuropathy</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Amputations</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>GERD</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Cardiac Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Retinal Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Sleep Arnoea</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Erectile Dysfunction</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Thyroid Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Liver Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Diet Control</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Craving for Sweets</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Smoking</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<article id="article3">
<h2>Insurance Information</h2>
<div class="line"></div>
<div class="articleBody clear"><!-- -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td height="30">
<b>Insurance Company Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy No</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Validity</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
<a href="#" class="up">Go UP</a>
<a href="www.spanwave.com" class="by">spanwave</a>
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
我一直试图解决自上一个小时以来的错误，但无法修复它。
答案 0 :(得分：3)
这是因为您的输入字段是只读
<input id="datepicker" readonly/>
//----^^^^---here
因此单击输入不会因此触发..不触发datepicker，删除（readonly）应该工作
答案 1 :(得分：0)
只需删除底部包含的最后两个脚本。您已经在顶部包含了jquery脚本。它将正常工作
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="script.js"></script>