2017-02-05 18 views
0

私は何とかdatepickerを動作させるために管理しましたが、私のWebアプリケーションで動作するjquery timepickerを取得できません。問題は私のヘッダーに含める情報にあると思う。私は適切なものを提供していないのですか?スクリプトタグはどういう意味ですか?私はjquery.timepicker.css/jsのコピーを自分のhtmlファイルと同じディレクトリに持っていますが、htmlファイルの先頭にあるものを参照する必要がありますか?あなたがCDNのリンクタグを削除することによって試みることができるJquery Timepicker Script Tags

<!DOCTYPE html> 
<html> 
<head> 
    <title>Columbia Ride Share</title> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="post-ride.css"> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Datepicker - Default functionality</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> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 
    <script> 
    $(document).ready(function(){ 
     $('input.timepicker').timepicker({}); 
    }); 
    </script> 
    <script> 
    $("timepicker").timepicker({ 
     startTime: "00.00" 
     timeFormat: 'h:mm p', 
     interval: 60, 
     endTime: new Date(0, 0, 0, 15, 30, 0), 
     separator: ':', 
     step: 15}); 
    </script> 
</head> 
<body> 
    <header> 
     // ..... 
    </header> 
    <div class = "form"> 
     <form action="action_page.php"> 
     <label for="airport">Airport</label> 
     <select id="airport" name="airport"> 
      <option value="jfk">JFK</option> 
      <option value="laguardia">Laguardia</option> 
      <option value="newark">Newark Liberty</option> 
     </select> 

     <label for="day">Day</label> 
     <input type="text" id="datepicker"> 

     <label for="time">Time</label> 
     <p>Between</p> <input type="text" class="timepicker"> 
     <p>And</p><input type="text" id="timepicker"> 

    </div> 
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script> 

</body> 
</html> 

答えて

0

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> 

、ちょうどあなたがhtmlファイルと同じディレクトリに持ってjquery.timepicker.css/JSファイルを使用します。はい、ヘッドセクションのファイルを参照することでそれらを使用します。

0

HTMLでは、<script> and </script>タグの間にJavaScriptコードを挿入する必要があります.HTMLドキュメントには任意の数のスクリプトを配置できます。スクリプトは、HTMLページのセクションまたはセクション、またはその両方に置くことができます。 headのスクリプトはページの読み込み中に最初に実行され、bodyのスクリプトは到達すると実行されます。あなたの場合、間違っているのは、ライブラリをbodyタグの中に宣言し、headタグでそれを使用することです。したがって、ページの初期化中には、タイムピッカーについての考えはありません。タイムピッカの初期化コードの前にtimepicker.jsを含めるようにスクリプトタグを記述する必要があります。これを行うには、初期化コードの前にhead内のtimepicker.jsのCDNインポートを移動するか、タイムピッカCDNインポート後に初期化コードを先頭から最後まで移動する必要があります。