2016-06-27 10 views
1

このプラグインの使い方を勉強しようとしていますが、何もできないようです。誰かが私を正しい方向に向けることができますか?これはララベルプロジェクトですが、大きな違いはありません。pickadate.jsはまったく動作しません

ここ

は私のhtmlです:

<p><input id="date" class="form-control" ng-model="currentWimDate" placeholder="Date..." type="text"></p> 

と私のindex.blade.php:

<html lang="en" ng-app="wim"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>WIM(afy)</title> 

    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/wimmain.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.css" id="theme_base"> 
    <link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.date.css" id="theme_date"> 
    <link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.time.css" id="theme_time"> 

    <script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/ng-file-upload-shim/ng-file-upload-shim.min.js"></script> 
    <script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script> 
    <script src="bower_components/lodash/lodash.js"></script> 
    <script src="bower_components/angular-route/angular-route.min.js"></script> 
    <script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script> 
    <script src="bower_components/restangular/dist/restangular.min.js"></script> 

    <script src = "js/app.js"></script> 
    <script src = "js/services.js"></script> 
    <script src = "js/controllers.js"></script> 
    <script src = "js/checkPass.js"></script> 
    <script src = "js/signupValidation.js"></script> 
    <script src = "js/dropdown.js"></script> 
    <script src = "js/profileActions.js"></script> 

    <style> 

     li { 
      padding-bottom: 8px; 
     } 

    </style> 
</head> 

<body style="background-color: #ef5350;">  
    <div ng-view></div> 


    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script src="bower_components/pickadate/lib/picker.js"></script> 
    <script src="bower_components/pickadate/lib/picker.date.js"></script> 
    <script src="bower_components/pickadate/lib/picker.time.js"></script> 

    <script type="text/javascript"> 
    // PICKADATE FORMATTING 
    $('#date').pickadate({ 
     format: 'mmmm d, yyyy',  // Friendly format displayed to user 
     formatSubmit: 'mm/dd/yyyy', // Actual format used by application 
     hiddenName: true   // Allows two different formats 
    }); 
    </script> 
</body> 

私はここで間違って何をしているのですか?

答えて

0

あなたのHTMLに#dateを入れてAngularが終了する前にjQueryコードが実行されていると思います。したがって、jQueryはあなたが探している要素を見つけることができないので、何も起こりません。これは、$('#date')の結果を出力することでテストできます。 Angular finishingをレンダリングした後、Pickadateコードを実行してみてください。お役に立つかもしれないquestionがあります。

関連する問題