2017-01-03 94 views
0

我想添加datepicker日历。但它不可见。为什么日历的datapicker不可见?

下面是我的代码:

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

在此先感谢!

+0

这是什么? @Deepa –

+1

删除了D标签,因为这与D无关。 – Bauss

+0

此代码有太多错误...我甚至不知道从哪里开始。 – Twisty

回答

0

这里是你的代码的工作示例,它的工作: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> 

你有这样的不正确关闭一些标签和这可以杀死你的代码。

另外,您没有提出任何问题。没办法知道这是你想要的。

+0

非常感谢你,这是我一直在寻找... –

+0

很高兴它为你工作。将来,请花时间在您的帖子中解释问题。这将有助于人们帮助你。 – Twisty