jquery datepicker与angular冲突_Jquery_Angularjs_Twitter Bootstrap_Jquery Ui_Datepicker

jquery datepicker与angular冲突

jquery angularjs twitter-bootstrap jquery-ui

jquery datepicker与angular冲突,jquery,angularjs,twitter-bootstrap,jquery-ui,datepicker,Jquery,Angularjs,Twitter Bootstrap,Jquery Ui,Datepicker,所以我有一个angular应用程序，我想插入jquery日期选择器。我知道这里有角度数据采集器，但我的经理想要这个jquery数据采集器 jquery日期选择器不工作。我只包括jquery日期选择器的外部文件，并将其添加到div。我得到的日期选择器不是一个函数。它阻塞了我的应用程序我使用angular 1.5.0和bootstrap 3.3.6 有没有办法绕过这场冲突谢谢这是我的结构 <!DOCTYPE html> <html> <head>

所以我有一个angular应用程序，我想插入jquery日期选择器。我知道这里有角度数据采集器，但我的经理想要这个jquery数据采集器

jquery日期选择器不工作。我只包括jquery日期选择器的外部文件，并将其添加到

div

。我得到的

日期选择器不是一个函数

。它阻塞了我的应用程序

我使用angular 1.5.0和bootstrap 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) {

我的html只是

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

日期：

像这样试试。。。在角度脚本上方添加externl库

var myApp=angular.module（'myApp'，[]）；
指令（“日期选择器”，函数（）{
返回{
限制：“A”，
要求：“ngModel”，
链接：函数（范围、元素、属性、ngModelCtrl）{
var updateModel=函数（dateText）{
作用域：$apply（函数（）{
ngModelCtrl.$setViewValue（日期文本）；
});
};
变量选项={
日期格式：“日/月/年”，
onSelect:函数（日期文本）{
更新模型（日期文本）；
}
};
元素日期选择器（选项）；
}
}
});
像这样试试。。。在角度脚本上方添加externl库

var myApp=angular.module（'myApp'，[]）；
指令（“日期选择器”，函数（）{
返回{
限制：“A”，
要求：“ngModel”，
链接：函数（范围、元素、属性、ngModelCtrl）{
var updateModel=函数（dateText）{
作用域：$apply（函数（）{
ngModelCtrl.$setViewValue（日期文本）；
});
};
变量选项={
日期格式：“日/月/年”，
onSelect:函数（日期文本）{
更新模型（日期文本）；
}
};
元素日期选择器（选项）；
}
}
});

看妈妈，没有冲突
这就是我所做的
外部图书馆的结构
<!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) {      

然后在我的html中
<input type="text" ng-model="datePicker" datepicker />



谢谢大家
看妈妈，没有冲突
这就是我所做的
外部图书馆的结构
<!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) {      

然后在我的html中
<input type="text" ng-model="datePicker" datepicker />



谢谢大家
如果说datepicker不是一个函数的话。这听起来更像是你没有正确地发起冲突，而不是冲突。你能试着用你的设置做一个调整吗？这是一个工作副本@KristianBarrett，我更新了我的原始帖子。请给我一些建议。谢谢，如果它说datepicker不是一个函数，那么我们看不到任何id为datepicker
的元素。这听起来更像是你没有正确地发起冲突，而不是冲突。你能试着用你的设置做一个调整吗？这是一个工作副本@KristianBarrett，我更新了我的原始帖子。请给我一些建议。谢谢，我们没有看到任何id为datepicker