datetime picker가있는 부트 스트랩이 제대로 작동하지 않습니다.

다음 코드를 사용하면 각 줄이 줄어들고 어떤 이유로 전체 UI가 손실됩니다. 내가 고칠 수 있을까?datetime picker가있는 부트 스트랩이 제대로 작동하지 않습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" media="screen" 
      href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> 


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
      crossorigin="anonymous"></script> 

    <script type="text/javascript" 
      src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
    </script> 
    <script type="text/javascript" 
      src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> 
    </script> 
    <script type="text/javascript" 
      src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"> 
    </script> 
    <script type="text/javascript" 
      src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"> 
    </script> 


</head> 
<body> 


<div class="container-fluid"> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-xs-12 col-sm-12"> 


       <div id="datetimepicker" class="input-append date"> 
        <input type="text"></input> 
        <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
     </span> 
       </div> 
      </div> 

     </div> 

    </div> 


    <div class="row"> 
     <div class="col-xs-12 col-sm-12"> 
      <input id="text" placeholder="text" type="text" class="form-control" 
        required="true"> 
     </div> 

    </div> 




</div> 

<script type="text/javascript"> 
    $('#datetimepicker').datetimepicker({ 
     format: 'dd/MM/yyyy hh:mm:ss', 
     language: 'pt-BR' 
    }); 
</script> 
</body> 
<html>

출처

2017-01-19 jason

피들을 추가하여 문제를 재현하십시오. –

https://jsfiddle.net/4kk7e77z/ – jason

피들 소스가로드되지 않습니다. 그리고 bootstrap.min.js가있는 두 개의 스크립트가 있습니다. 아마도 그게 문제가 될 수 있습니다. – Roy

문제가 많은 이곳은 내 친구 :

로드 jQuery를 적어도 하나의 부트 스트랩 적어도 바이올린의 js 파일
후 부트 스트랩의 여러 버전을로드는 이상로드 http (반대로) https
사용하려는 datetimepicker은 (는) 부트 스트랩 3 및 no longer maintained입니다.
html에는 이전 버전과 새로운 버전의 부트 스트랩 모두가 포함되어 있습니다.

Here's a somewhat fixed version of your fiddle하지만 실제로 원하는대로 작동하지 않을 것으로 예상됩니다.

출처

2017-01-19 14:43:00

안녕 Serg. 부트 스트랩과 함께 사용하는 것과 다른 datetime picker를 제안 할 수 있습니까? 그것은 큰 도움이 될 것입니다. 감사합니다 :) – jason

개인적인 경험으로는 추천 할 수 없지만 선택할 방법을 알려줄 수 있습니다. GitHub 페이지에서 찾으려는 플러그인이 있는지 확인하고 플러그인이 더 이상 유지 관리되지 않는다는 것을 확인하십시오. 또한 두 개의 플러그인을 비교할 때 각각 별점의 개수와 같은 것을 보게됩니다. 그렇게하면 인기에 대한 척도가 나타나고 커뮤너티가 더 큰 것은 무엇이든 사용하고 싶어합니다. 예를 들면 다음과 같습니다. https://github.com/Eonasdan/bootstrap-datetimepicker –

jsfiddle에서 어떻게 사용합니까? 정말 고마워. :) – jason

datetime picker가있는 부트 스트랩이 제대로 작동하지 않습니다.

답변

관련 문제