Question

我正在使用js和Html学习日期选择器概念。

我尝试了很多代码，但它没有用。单击输入类型时，日期选择器未显示/打开。

我尝试了以下代码，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head>
<title>-::Simchalam Devastanam::-</title>

<style type="text/css">
<!--
  body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background: #f1e767; /* Old browsers */
    background-color: #FFCC00;
        }
       -->
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js">            </script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
    $(document).ready(function() {
    $('#date').datepicker();
});
      </script>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" />

    </head>
    <body>

<div class="header">
    <h1 align="center"><img src="images/logo.png" alt="logo" longdesc="index.html" /></h1>
</div>
<div class="nav">
    <div class="menu">
    <ul>
        <li><a href="#">About Devastanam</a></li>
        <li><a href="register.php">Register</a></li>
        <li><a href="login.php">Login</a></li>
        <li><a href="seva.php">Seva Details</a></li>
        <li><a href="booking.php">Ticket Booking</a></li>
        <li><a href="contactus.php">Contact Us</a></li>
    </ul>
</div>
</div>

<div class="arrange">
    <h3> Select Seva</h3>
    <br />
    <select id="dropdown">
            <option disabled selected value> -- Select an Seva -- </option>
            <option value="Ashtottara Sathanamarchana">Ashtottara Sathanamarchana</option>
            <option value="Sahasranamarchana (05.00 PM - 05.45 PM)">Sahasranamarchana (05.00 PM - 05.45 PM)</option>
            <option value="Ammavaraki Ashtottara Sathanamarchana">Ammavaraki Ashtottara Sathanamarchana</option>
            <option value="Kappasthabham Aalinganam">Kappasthabham Aalinganam</option>
            <option value="Gopooja">Gopooja</option>
            <option value="Nitya Kalyanam (09.30 AM - 10.30 AM)">Nitya Kalyanam (09.30 AM - 10.30 AM)</option>
            <option value="Garuda Seva">Garuda Seva</option>
            <option value="Swarnapushparchana (Every Thursday at 07.00 AM - 08.00 AM)">Swarnapushparchana (Every Thursday at 07.00 AM - 08.00 AM)</option>
            <option value="Laksha Kunkumarchana">Laksha Kunkumarchana</option>
            <option value="Laksha Tulasi Pooja">Laksha Tulasi Pooja</option>
            <option value="Saswatha Laksha Kumkumarchana">Saswatha Laksha Kumkumarchana</option>
            <option value="Saswatha Laksha Tulasi Pooja">Saswatha Laksha Tulasi Pooja</option>
            <option value="Nityapooja, Bhogakainkaryamu">Nityapooja, Bhogakainkaryamu</option>
            <option value="Saswatha Nitya Kalyanam">Saswatha Nitya Kalyanam</option>
            <option value="Saswatha Garuda Seva">Saswatha Garuda Seva</option>
            <option value="Sahasra Deepalankarana Seva (Every Saturday at 05.30 PM - 06.30 PM">Sahasra Deepalankarana Seva (Every Saturday at 05.30 PM - 06.30 PM</option>
            <option value="Sudarsana Narasimha Yagam (Monthly once on Swathi Nakshathram day)">Sudarsana Narasimha Yagam (Monthly once on Swathi Nakshathram day)</option>
        </select>
       <br /><br />
       <h3>Select Date</h3> 
      <br />
      <div class="demo">
      <input id="date" type="text" size="8" />
      </div>
      </div>

      </body>
      </html>

我是这个编码的学习者，如果有任何错误请原谅!!!

Answer 1

您应在JQuery ( jquery.min.js )

之前提及JQuery UI jquery-ui.min.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js">

为日期选择器添加样式添加Jquery UI CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

  $(document).ready(function() {
    $('#date').datepicker();
  });

<style type="text/css"><!-- body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background: #f1e767;
  /* Old browsers */
  background-color: #FFCC00;
}

--></style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head>
  <title>-::Simchalam Devastanam::-</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js">
  </script>
 



  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  

</head>

<body>

  <div class="header">
    <h1 align="center"><img src="images/logo.png" alt="logo" longdesc="index.html" /></h1>
  </div>
  <div class="nav">
    <div class="menu">
      <ul>
        <li><a href="#">About Devastanam</a></li>
        <li><a href="register.php">Register</a></li>
        <li><a href="login.php">Login</a></li>
        <li><a href="seva.php">Seva Details</a></li>
        <li><a href="booking.php">Ticket Booking</a></li>
        <li><a href="contactus.php">Contact Us</a></li>
      </ul>
    </div>
  </div>

  <div class="arrange">
    <h3> Select Seva</h3>
    <br />
    <select id="dropdown">
            <option disabled selected value> -- Select an Seva -- </option>
            <option value="Ashtottara Sathanamarchana">Ashtottara Sathanamarchana</option>
            <option value="Sahasranamarchana (05.00 PM - 05.45 PM)">Sahasranamarchana (05.00 PM - 05.45 PM)</option>
            <option value="Ammavaraki Ashtottara Sathanamarchana">Ammavaraki Ashtottara Sathanamarchana</option>
            <option value="Kappasthabham Aalinganam">Kappasthabham Aalinganam</option>
            <option value="Gopooja">Gopooja</option>
            <option value="Nitya Kalyanam (09.30 AM - 10.30 AM)">Nitya Kalyanam (09.30 AM - 10.30 AM)</option>
            <option value="Garuda Seva">Garuda Seva</option>
            <option value="Swarnapushparchana (Every Thursday at 07.00 AM - 08.00 AM)">Swarnapushparchana (Every Thursday at 07.00 AM - 08.00 AM)</option>
            <option value="Laksha Kunkumarchana">Laksha Kunkumarchana</option>
            <option value="Laksha Tulasi Pooja">Laksha Tulasi Pooja</option>
            <option value="Saswatha Laksha Kumkumarchana">Saswatha Laksha Kumkumarchana</option>
            <option value="Saswatha Laksha Tulasi Pooja">Saswatha Laksha Tulasi Pooja</option>
            <option value="Nityapooja, Bhogakainkaryamu">Nityapooja, Bhogakainkaryamu</option>
            <option value="Saswatha Nitya Kalyanam">Saswatha Nitya Kalyanam</option>
            <option value="Saswatha Garuda Seva">Saswatha Garuda Seva</option>
            <option value="Sahasra Deepalankarana Seva (Every Saturday at 05.30 PM - 06.30 PM">Sahasra Deepalankarana Seva (Every Saturday at 05.30 PM - 06.30 PM</option>
            <option value="Sudarsana Narasimha Yagam (Monthly once on Swathi Nakshathram day)">Sudarsana Narasimha Yagam (Monthly once on Swathi Nakshathram day)</option>
        </select>
    <br /><br />
    <h3>Select Date</h3>
    <br />
    <div class="demo">
      <input id="date" type="text" size="8" />
    </div>
  </div>

</body>

</html>

Answer 2

添加这些脚本

        <html>
        <body>
        <label for="shootdate">Desired Date:</label>
        <input required type="date" name="shootdate" id="shootdate" title="Choose your desired date"/>
        </body>
        </html>

然后添加这些行

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

你的HTML中的

<script>
 $(function () {
          $('#date').datepicker({

                }); });
</script>

这可能有用。检查一次

Answer 3

您好我已经从您的代码创建了代码段。

https://jsfiddle.net/cs56bdmy/

添加

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

这会对你有所帮助

修正了语法错误

3 个答案: