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

【问题标题】：why calendar's datapicker is not visible?为什么日历日期选择器不可见？
【发布时间】：2017-01-03 14:04:27
【问题描述】：

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

下面是我的代码：

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

提前致谢！

【问题讨论】：

这是什么？ @Deepa
删除了 D 标签，因为这与 D 无关。
这段代码有很多问题......我什至不知道从哪里开始。

标签： jquery html jquery-ui datapicker

【解决方案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>

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

另外，你没有问任何问题。无法知道这是否是您要找的。p>

【讨论】：

很高兴它对您有用。将来，请花时间在您的帖子中解释该问题。这将帮助人们帮助你。