gpt4 book ai didi

javascript - 如何在网页中包含日历

转载 作者:可可西里 更新时间:2023-11-01 13:13:21 25 4
gpt4 key购买 nike

嗨,我想在我的网页中包含一个日历,在谷歌搜索后我找到了这段代码

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

自上一小时以来,我一直在尝试解决错误,但无法修复。

最佳答案

这是因为你的输入框是只读的

<input id="datepicker" readonly/>
//----^^^^---here

因此不会触发输入的点击.. 不会触发日期选择器,删除它(只读)应该可以工作

关于javascript - 如何在网页中包含日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15926357/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com