なぜカレンダーのデータピッカーが表示されないのですか？

datepickerカレンダーを追加しようとしています。しかし、それは見えません。以下はなぜカレンダーのデータピッカーが表示されないのですか？

私のコードです：事前に

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

感謝！ここで

出典

2017-01-03 Deepa Monger

これは何ですか？ @Deepa –

これはDとは関係がないので、Dタグを削除しました。 – Bauss

このコードには非常に多くのものがあります。どこから始めるべきか分かりません。 – Twisty

はあなたのコードの実施例である、それは仕事を行います。ここでは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>

あなたが適切に閉じられなかったいくつかのタグを持っていたし、あなたのコードを殺すことができます。

また、あなたは質問しませんでした。これがあなたが探していたものかどうかを知る方法はありません。

出典

2017-01-03 17:09:51 Twisty

私はこれを探していたので、これほどにありがとうございました... –

喜んでそれはあなたのために働いています。今後、あなたの投稿の問題を説明する時間を取ってください。これは人々があなたを助けるのに役立ちます。 – Twisty

なぜカレンダーのデータピッカーが表示されないのですか？

答えて

関連する問題