3

こんにちは、ウェブページにカレンダーを含めたいと思っていました。グーグルで検索した後、このコードを見つけました

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

過去 1 時間からエラーを整理しようとしましたが、修正できませんでした。

4

2 に答える 2

3

入力フィールドが読み取り専用であるためです

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

したがって、入力のクリックは起動しません.. datepicker を起動せず、それを削除すると（読み取り専用）動作するはずです

于 2013-04-10T12:55:12.873 に答える
0

一番下に含めた最後の 2 つのスクリプトを削除するだけです。すでに jquery スクリプトを一番上に含めています。正常に動作します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="script.js"></script>
于 2013-04-10T13:02:39.053 に答える