2016-09-26 2 views
0

datepicker를 사용하려고 시도했지만 작동하지 않습니다.

나는이 오류가 : $(...).datepicker하지 함수

나는 많은 프레임 워크와 librairy을 (Adminlte, 부트 스트랩, chartjs, 데이터 테이블)를 사용합니다. 그리고 저는 그들 사이에 갈등이 있다고 생각합니다.

$(document).ready(function() { 
 
    $('#datepicker').datepicker(); 
 
    $('#datepicker').on("changeDate", function() { 
 
     $('#my_hidden_input').val(
 
      $('#datepicker').datepicker('getFormattedDate') 
 
     ); 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html lang="fr"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>AdminLTE 2 | Dashboard</title> 
 
    <!-- Tell the browser to be responsive to screen width --> 
 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
 
    <!-- Bootstrap 3.3.6 --> 
 
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
 
    <!-- Font Awesome --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
    <!-- Ionicons --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> 
 

 
    <!-- Theme style --> 
 
    <link rel="stylesheet" href="./css/AdminLTE.min.css"> 
 
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
 
     folder instead of downloading all of them to reduce the load. --> 
 
    <link rel="stylesheet" href="./css/skin-black-light.css"> 
 
    <!-- CSS Table --> 
 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 

 

 
    <!-- My Style --> 
 
    <link rel="stylesheet" href="./css/style_general.css"> 
 
    <link rel="stylesheet" href="./css/style.css"> 
 

 
    <link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" /> 
 
    <link rel="stylesheet/less" type="text/css" href="./less/sprites.less" /> 
 

 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body class="hold-transition skin-blue sidebar-mini fixed"> 
 
    
 
           <div class="form-group"> 
 
           <label>Date</label> 
 
           <div class="input-group date margin-bottom-10" id="datetimepicker1"> 
 
            <input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY"> 
 
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
           </div> 
 
          </div> 
 
    
 
    <!-- jQuery 2.2.3 --> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
    <!-- Bootstrap 3.3.6 --> 
 
    <script src="./js/bootstrap.min.js"></script> 
 
    <!-- AdminLTE App --> 
 
    <script src="./js/app.min.js"></script> 
 
    <!-- ChartJS 1.0.1 --> 
 
    <script src="./js/Chart.min.js"></script> 
 
    <!-- AdminLTE for demo purposes --> 
 
    <script src="./js/demo.js"></script> 
 
    <!-- SlimScroll 1.3.0 --> 
 
    <script src="./js/jquery.slimscroll.min.js"></script> 
 
    <!-- JS table --> 
 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
    <script src="./js/test_table.js"></script> 
 
    <script src="./js/js.js"></script> 
 
</body> 
 

 
</html>

+1

'jquery'를 포함 시켰습니까? –

+0

try jQuery (...). datepicker –

+1

질문에 실제 코드를 넣지 않고 jsbin에 연결하지 마십시오 ... – evolutionxbox

답변

1

내가 날짜 선택기 JQuery와 UI에서 사용할 수 있습니다 생각하지만, 당신이 그 라이브러리 파일을 포함하지 않았다. 나는 아래의 파일을 포함 할 때 그런 오류를 $ (...). 날짜 선택기

이러한 파일을 포함하고 확인하세요 없다
[링크] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[링크] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

+0

링크를 추가하지만 아무 것도 변경하지 않습니다. – DenisMasot

+0

https : // jqueryui 링크를 확인하십시오. com/datepicker/ –

+0

@Naveen 나는 지난 시간 동안 유령을 쫓고 있다고 생각했는데, 여기서 나는 OP와 같은 오류가 발생했다. 나는이 Q & A (귀하의 답변이 구체적으로 나를위한 해결책이었습니다)가 나올 때까지 Google에서 모든 시간 동안 테스트를 마쳤습니다. 여기서 jquery UI의 최신 버전을 사용해야 만했습니다.다른 모든 (비슷한) 질문/답변은 도움이되지 못했지만 당신의 질문/답변은 도움이되지 않았습니다. 그냥 내가 당신과 공유 할 줄 ​​알았는데, * 건배 * –

4

는 것을 포함하는 것이 있는지 확인하십시오 당신이 그것을 사용하는 페이지 datapicker.js 라이브러리입니다. 링크/로컬 파일이 있는지 확인하십시오. 부트 스트랩/프레임 워크를 사용하는 경우 다른 파일에서로드 될 수 있습니다.

가장 일반적인 이유입니다.

+0

잘못된 순서는 일반적인 문제이므로 jQuery.js를 두 번 이상 포함합니다. 오류가 발생할 수있는 수많은 이유가 있습니다. – charlietfl

+1

링크를 추가했지만 아무 것도 변경되지 않습니다. – DenisMasot

-1

Inclue JqueryUI

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

0

내가 모든 JS 파일을 통해 갔다.

귀하의 js 및 css에 AdminLTe을 사용하고 있음에 유의하십시오. 그런 경우 왼쪽 패널에있는 Forms > Advanced Elements의 예를 다시 확인하십시오.

나는 당신이 놓쳤다 생각 bootstrap datepicker이 검색하는 AdminLTe 예에서 파일을 JS보십시오 : <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">

+0

부트 스트랩 datepicker를 사용하지 않습니다. – DenisMasot

2
<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> 
    var j = jQuery.noConflict(); 
    j(function() { 
     j("#datepicker").datepicker(); 
    }); 
</script> 

이렇게 시도하십시오. 잘 작동합니다. 동일한 객체가 jquery에 의해 정의되고 사용되므로 충돌이 위의 작업을 위의 방식으로 시도합니다.

+1

코드를 올바르게 탭하고 코드 조각에 설명을 추가하여 명확히하십시오. – mickmackusa

+0

감사합니다 :) – Sarjil

관련 문제