2017-02-22 6 views
1

Я изучаю концепцию выбора даты, используя 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> 

Я обучающийся в этой кодировке, если какие-либо ошибки, пожалуйста, простите меня !!!

+0

Не могли бы вы предоставить более подробную информацию о проблеме? Любая ошибка появляется в консоли js? – jcgarcia

ответ

2

Вы должны обратиться 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>

+0

Спасибо, что ваш код мне очень помог !!! –

+0

@ KarthikAenugula Добро пожаловать, Счастливое кодирование: D –

0

Добавьте эти скрипты

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

Затем добавьте эти строки

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

       }); }); 
</script> 

в вашем HTML

<input id="date" type="text" /> 

Это может work.Check его однажды

0

Привет я создал фрагмент из вашей компании де.

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> 

это поможет вам

+0

брат, где мне нужно скопировать этот код js –

+0

, который JS-код ??? вам нужно только добавить ссылки выше в своей заголовочной части. – spankajd

Смежные вопросы