트위터 부트 스트랩을 DateTimePicker 내가 여기에서 부트 스트랩 날짜 시간 선택기를 사용하는 것을 시도하고있다

을 표시하지 않습니다. 달력 글리프를 클릭해도 아무 일도 일어나지 않습니다. datetime picker가 나타날 것으로 예상됩니다!트위터 부트 스트랩을 DateTimePicker 내가 여기에서 부트 스트랩 날짜 시간 선택기를 사용하는 것을 시도하고있다

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Template for bootstrap</title> 
    <link href="dependencies/bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="dependencies/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="dependencies/jquery/jquery-2.0.3.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="col-md-10"> 
     <div class="well"> 
      <div class="form-group"> 
      <div class="input-group date" id="datetimepicker1"> 
       <input type="text" class="form-control"> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span> 
       </span> 
      </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
      $('#datetimepicker1').datetimepicker(); 
      }); 

     </script> 
     </div> 
    </div> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" src="dependencies/bootstrap/js/bootstrap.js"></script> 
    <script type="text/javascript" src="dependencies/bootstrap-datetimepicker.min.js"></script> 
    </body> 

</html>

편집 : 1 : 다음은 소스 코드 나 또한 전화 timepicker 기능 이후에 포함 JS libs와 바디 종료 태그 전에,하지만 성공을 노력했다.

<body> 
    <div class="container"> 
    <div class="col-md-10"> 
     <div class="well"> 
     <div class="form-group"> 
      <div class="input-group date" id="datetimepicker1"> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span> 
      </span> 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" src="dependencies/bootstrap/js/bootstrap.js"></script> 
    <script type="text/javascript" src="dependencies/bootstrap-datetimepicker.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('#datetimepicker1').datetimepicker(); 
    }); 

    </script> 
</body>

출처

2013-10-21 Gabbar Singh

바디 엔드 태그 바로 앞에 timepicker 함수 _after_를 포함하여 JS 라이브러리를 호출 해 보았습니까? –

나는 그것을 시도했지만 성공하지 못했다. –

귀하의 사이트에 대한 링크를 게시 할 수 있습니까? –

자원이 제대로 연결되어 있는지 확인, 다운로드 및 외부 링크에서 자원을 대체하고 그것을 사용할 수 있습니다. 이 코드를 사용해보십시오,

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Template for bootstrap</title> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="http://eonasdan.github.io/bootstrap-datetimepicker/styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="col-md-10"> 
     <div class="well"> 
      <div class="form-group"> 
      <div class="input-group date" id="datetimepicker1"> 
       <input type="text" class="form-control"> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span> 
       </span> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     $('#datetimepicker1').datetimepicker(); 
     }); 

    </script> 
    </body> 

</html>

출처

2013-10-21 12:33:22 devo

감사합니다. 방금 발견했으나 다른 사람들이 유용하다고 생각하는 포괄적 인 답장을 +1했습니다. –

버전 2에 대한 최신 연결, 필요한 momentjs. 이 코드는 작동하지 않습니다. – Eonasdan

트위터 부트 스트랩을 DateTimePicker 내가 여기에서 부트 스트랩 날짜 시간 선택기를 사용하는 것을 시도하고있다

답변

관련 문제