jquery datepicker Konflikte mit eckigen

So habe ich eine eckige Anwendung und ich möchte einfügen this jquery datepicker. Ich weiß, es gibt eckige datepickers da draußen, aber mein Manager will diesen jquery datepicker.jquery datepicker Konflikte mit eckigen

Der jquery Datepicker funktioniert nicht. Ich schließe einfach die externen Dateien für den jquery datepicker ein und füge es zu div hinzu. Ich bekomme datepicker is not a function. Es stört meine Anwendung.

Ich benutze Angular 1.5.0 und Bootstrap 3.3.6.

Gibt es eine Möglichkeit, diesen Konflikt zu umgehen?

Dank

Das ist meine Struktur

<!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) {

und später in meinem Code in der Steuerung der Seite I

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

und meine html haben nur

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

Quelle

2016-03-30 slevin

Nun, wenn er sagt, dass Datepicker ist keine Funktion . Dann hört es sich eher so an, als würden Sie es nicht korrekt initiieren, sondern eher als Konflikt. Könnten Sie versuchen, ein http://jsfiddle.net/ mit Ihrer Einrichtung zu machen? Dann ist es viel einfacher zu helfen. –

Dieser Link wird Ihnen helfen [codepen] (http://codepen.io/tutorialab/pen/JDxkn) –

hier ist eine ** funktionierende ** Kopie [link] (http://plnkr.co/edit/TTBhwCqioKEELAGfkrwl?p = Vorschau) – manish

versuchen li ke dies ...

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>

Quelle

2016-03-30 08:07:18

Blick Mutter, keinen Konflikt

Hier externl Bibliotheken über dem Winkel Skript hinzuzufügen ist, was ich tat

Struktur von externen Bibliotheken

<!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) {

und dann in meinem Winkel (Javascript)

kopieren Sie einfach die Richtlinie

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); 
    } 
    } 
});

und dann in meinem html, nur

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

Vielen Dank allen

Quelle

2016-03-30 08:12:31 slevin

jquery datepicker Konflikte mit eckigen

Antwort

Verwandte Themen