timepickerがドロップダウンを表示していません

最近、htmlとcssで再生を開始しましたが、時間セレクタがついています。基本的には、私は時間と日付の選択を含む私のウェブサイトのためのフォームを作成しています。私の日付セレクタはうまくいきます（それはカレンダーを表示します）。しかし、私のタイムセレクタのドロップダウンは何もしません。私は多くの解決策を試しましたが、誰も幸せに働いていません。コードをスニペットに貼り付けると、エラーが発生しました。timepickerがドロップダウンを表示していません

$（）...時間ピッカーが示唆したように、私が追加bootstrap.min.jsとjQuery-1.11.1.min.jsを含む多くのソリューションを試してみました

関数ではありませんThisでは運がありません。

多くのおかげで、ハッサム

$(function() { 
 
    $("#datepicker1").datepicker(); 
 
}); 
 
$("#timepicker").timepicker();

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <title>Javascript</title> 
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <link rel="styleshee" type="text/css" href="jquery.timepicker.css" /> 
 
     <link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css"> 
 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
     <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
 
     <link rel="stylesheet" href="css/fontAwesome.css"> 
 
     <link rel="stylesheet" href="css/hero-slider.css"> 
 
     <link rel="stylesheet" href="css/tooplate-style.css"> 
 

 
     <link rel="stylesheet" type = "text/css" href="new.css"> 
 
     <link rel="stylesheet" href="hr-timePicker.min.css"> 
 

 
     <script type="text/javascript" src ="script.js"></script> 
 
     
 
    </head> 
 
    <body> 
 
      
 
      <div class = "bgImage"> 
 
        
 
      <form> 
 
        
 
         <div class="formWrap"> 
 
         <p class = "text">Please Enter Your details</p> 
 
         <input type="text" name="firstname" placeholder="firstname*" required autofocus /> 
 
         <input type="text" name="lastname" placeholder="lastname*" required /> 
 
         <input type="email" name="email" placeholder="email*" required /> 
 
         <input type="text" class="js--datePicker" id="datepicker1" value="Date*">  
 
         <input id="timepicker" class = "timepicker" name="datetime" type="text" required> 
 
         <input type="submit" id="submit" class="submit" value="Submit" /> 
 
         
 
    </body> 
 

 
</html>

私が使用してCDNにtimepicker jsのコードに絶対参照を使用するようにコードを更新

enter code here

出典

2017-10-30 Hassam Munir

Timepickerが外部ライブラリです。あなたが提供したリンクの頭の部分を確認してください。 jqueryリンクの後に 'https：// cdnjs.com/libraries/jquery-timepicker'から' jquery.timepicker.js'ライブラリを参照してみてください。 – Brian

：

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

とあなたの</body>タグの前に次を追加しました：ここ

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

は、作業の抜粋です：

$(function() { 
 
    $("#datepicker1").datepicker(); 
 
}); 
 

 
$(function() { 
 
    $('#timepicker').timepicker(); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <title>Javascript</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="styleshee" type="text/css" href="jquery.timepicker.css" /> 
 
    <link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css"> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
 
    <link rel="stylesheet" href="css/fontAwesome.css"> 
 
    <link rel="stylesheet" href="css/hero-slider.css"> 
 
    <link rel="stylesheet" href="css/tooplate-style.css"> 
 

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

 
    <script type="text/javascript" src="script.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="bgImage"> 
 

 
    <form> 
 

 
     <div class="formWrap"> 
 
     <p class="text">Please Enter Your details</p> 
 
     <input type="text" name="firstname" placeholder="firstname*" required autofocus /> 
 
     <input type="text" name="lastname" placeholder="lastname*" required /> 
 
     <input type="email" name="email" placeholder="email*" required /> 
 
     <input type="text" class="js--datePicker" id="datepicker1" value="Date*"> 
 
     <input id="timepicker" class="timepicker" name="datetime" type="text" required> 
 
     <input type="submit" id="submit" class="submit" value="Submit" /> 
 

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

 
</html>

出典

2017-10-30 19:03:01 jfeferman

こんにちは、jfeferman、すばらしい返答をいただきありがとうございます。コードスニペットは完璧に機能していますが、ウォーターフォックスで実行すると、まだドロップダウンが表示されません！ –

私は自分のhtmlを.phpとして保存しました。それは作業を開始しました:) –

私は問題を解決してうれしいです！ – jfeferman

timepickerがドロップダウンを表示していません

答えて

関連する問題