2017-01-03 91 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