jquery datepickerが角と矛盾します

角度のあるアプリケーションがあり、this jquery datepickerを挿入します。角度のある日付ピッカーはありませんが、私のマネージャーはこのjquery datepickerを求めています。jquery datepickerが角と矛盾します

jquery datepickerが機能しません。 jquery datepickerの外部ファイルをインクルードしてdivに追加するだけです。私はdatepicker is not a functionを得る。それは私のアプリケーションを詰まらせる。

私は、角度1.5.0とブートストラップ3.3.6を使用します。

この競合を回避する手段はありますか？

おかげ

これは私の構造

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <base href="/apps/ely/"> 

     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 

     <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">   
     <link href="./css/timelineCSS.css" rel="stylesheet">   

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
     <script src="./js/angular-filter.min.js"></script> 

     <!-- <script src="./js/ui-bootstrap-1.2.2.min.js"></script> -->      

     <script src="./js/angular-local-storage.min.js"></script>     

     <script src="./js/progressbar.min.js"></script>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

     <link href="./css/cssStyle.css" rel="stylesheet"> 
     <link href="./css/cssStyleQueries.css" rel="stylesheet"> 
     <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

     <script>   
      var app = angular.module('app', ['ngRoute', 'LocalStorageModule', 'ngAnimate', 'ui.bootstrap', 'angular.filter']);     
      app.config(function ($routeProvider , $httpProvider, localStorageServiceProvider) {

で、後に私のコードでは、ページのコントローラ内部で私は

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

を持っており、私のHTMLはちょうど

<p>Date: <input type="text" id="datepicker"></p>

です

出典

2016-03-30 slevin

まあ、誰も私のhtmlで

app.directive("datepicker", function() { return { restrict: "A", require: "ngModel", link: function (scope, elem, attrs, ngModelCtrl) { var updateModel = function (dateText) { scope.$apply(function() { ngModelCtrl.$setViewValue(dateText); }); }; var options = { dateFormat: "dd/mm/yy", onSelect: function (dateText) { updateModel(dateText); } }; elem.datepicker(options); } } });

してから、ちょうど

<input type="text" ng-model="datePicker" datepicker />

おかげディレクティブをコピーします。そして、それはあなたが紛争よりもむしろ正しく始動していないように思えます。あなたはセットアップでhttp://jsfiddle.net/を作ろうと思いますか？それは助けが簡単です。 –

このリンクはあなたを助けるでしょう[codepen]（http://codepen.io/tutorialab/pen/JDxkn） –

ここには** working **のコピー[link]（http://plnkr.co/edit/TTBhwCqioKEELAGfkrwl?p =プレビュー） – manish

try li KEこの...ルックお母さん

var myApp = angular.module('myApp', []); 
 

 
myApp.directive("datepicker", function() { 
 
    return { 
 
    restrict: "A", 
 
    require: "ngModel", 
 
    link: function (scope, elem, attrs, ngModelCtrl) { 
 
     var updateModel = function (dateText) { 
 
     scope.$apply(function() { 
 
      ngModelCtrl.$setViewValue(dateText); 
 
     }); 
 
     }; 
 
     var options = { 
 
     dateFormat: "dd/mm/yy", 
 
     onSelect: function (dateText) { 
 
      updateModel(dateText); 
 
     } 
 
     }; 
 
     elem.datepicker(options); 
 
    } 
 
    } 
 
});

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
 

 

 
<div id="wrapper" ng-app="myApp"> 
 
    <input type="text" ng-model="datepicker" datepicker /> 
 
</div>

出典

2016-03-30 08:07:18

角度スクリプト上externlライブラリを追加、ここで競合

は、外部ライブラリ

の

構造は、私がやったことではありません

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <base href="/apps/elety/"> 

     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 

     <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">   
     <link href="./css/timelineCSS.css" rel="stylesheet">   

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
     <script src="./js/angular-filter.min.js"></script> 

     <script src="./js/ui-bootstrap-1.2.2.min.js"></script> 

      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 


     <script src="./js/angular-local-storage.min.js"></script>     

     <script src="./js/progressbar.min.js"></script>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

     <link href="./css/cssStyle.css" rel="stylesheet"> 
     <link href="./css/cssStyleQueries.css" rel="stylesheet"> 

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

     <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 





     <script>   
      var app = angular.module('app', ['ngRoute', 'LocalStorageModule', 'ngAnimate', 'ui.bootstrap', 'angular.filter']);     
      app.config(function ($routeProvider , $httpProvider, localStorageServiceProvider) {

それは日付ピッカーが関数ではないことを言えば、私の角度（ジャバスクリプト）に

はちょうど

出典

2016-03-30 08:12:31 slevin

jquery datepickerが角と矛盾します

答えて

関連する問題