javascript - 修正了语法错误

标签 javascript jquery datepicker

我正在使用 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>

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

最佳答案

您应该引用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>

关于javascript - 修正了语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42383775/

上一篇：javascript - 如何从动态创建的文本框中获取值？

下一篇：javascript - 如何使用 PlayFramework 更改 Bootstrap 侧边栏类事件状态？

相关文章：

javascript - 如何在 JavaScript 中跟踪回调函数事件？

javascript - 重新调整 JavaScript 数组的尺寸(即 1x6 => 2x3)

jquery - 将样式添加到树的节点 ("li")

jQuery TagIt(自动完成)通过 AJAX 获取 JSON 列表

iPhone:在弹出的 DatePicker 框架中添加“完成”按钮

Java (Android Studio) - 无法使用 LocalBroadcastManager.getInstance(this)

javascript - POST 错误搜索 API

javascript - 无法使用 Cheerio (Node.js/jQuery) 查找元素

javascript - 缓存mapbox平铺图像

angular - ng-pick-date 选择器 : How to set date format?

©2024 IT工具网  联系我们