为什么日历日期选择器不可见？

Question

我正在尝试添加日期选择器日历。然而它是不可见的。

下面是我的代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta
  name="viewport" content="width=device-width,
  initial-scale=1"><title>jQuery UI Datepicker - Select a Date
     Range</title<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js" </script>
  <script>
          $('#date1').datepicker({  maxDate: '+0d',  changeMonth: true, numberOfMonths: 1, onClose: function (selectedDate) {
          $('#date2').datepicker("option", "minDate", selectedDate);
          setTimeout(function () {
             $('#date2').focus();
         }, 100);
        } }); $('#date2').datepicker({
        maxDate: '+0d',
        changeMonth: true,
        numberOfMonths: 1,
       onClose: function (selectedDate) {
       $('#date1').datepicker("option", "maxDate", selectedDate);
 } }); </script> </head> <body>
 <header>
 <h3>Bhutan Trip planner</h3>
 </header>
 <div class="tableoptions"> <span class="field">  
         <label for="fromdate">From:</label>
         <input id="date1" name='fromdate' type="text" class="width75" /> 
     </span>  <span class="field">
         <label for="todate">To:</label>
        <input id="date2" name='todate' type="text" class="width75" /> 
     </span> </div> </body> </html>

提前致谢！

Answer 1

这是您的代码的一个工作示例，它确实有效：https://jsfiddle.net/Twisty/dsn9t5g3/

这是你的代码，稍作清理：

<!DOCTYPE html> <html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
  <script>
  $(function(){
    $('#date1').datepicker({
      maxDate: '+0d',
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function (selectedDate) {
        $('#date2').datepicker("option", "minDate", selectedDate);
        setTimeout(function () {
          $('#date2').focus();
        }, 100);
      }
    });
    $('#date2').datepicker({
      maxDate: '+0d',
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function (selectedDate) {
        $('#date1').datepicker("option", "maxDate", selectedDate);
      }
    });
  });
  </script>
</head>
<body>
  <header>
    <h3>Bhutan Trip planner</h3>
  </header>
  <div class="tableoptions">
    <span class="field">  
      <label for="fromdate">From:</label>
      <input id="date1" name='fromdate' type="text" class="width75" /> 
    </span>
    <span class="field">
      <label for="todate">To:</label>
      <input id="date2" name='todate' type="text" class="width75" /> 
    </span>
  </div>
</body>
</html>

您有一些标签没有正确关闭，可能会破坏您的代码。

另外，你没有提出问题。无法知道这是否是您要找的。

为什么日历日期选择器不可见？

why calendar's datapicker is not visible?

html

jquery

jquery-ui

datapicker