stackoom
  简体   繁体   中英

jquery datepicker conflicts with angular

 原文  2016-03-30 07:31:51  5   2    jquery/ angularjs/ twitter-bootstrap/ jquery-ui/ datepicker

Question

So I have an angular application and I want to insert this jquery datepicker. I know there are angular datepickers outhere but my manager wants this jquery datepicker.

The jquery datepicker does not work. I just include the external files for the jquery datepicker and add it to div . I get datepicker is not a function . It jams my application.

I use angular 1.5.0 and bootstrap 3.3.6.

Is there a way to bypass this conflict?

Thanks

This is my structure 

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

and later in my code, inside the controller of the page I have 

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

and my html is just 

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

2 answers

solution1
 1  2016-03-30 08:07:18

try like this... add externl libraries above the angular script 

 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>

solution2
 1  2016-03-30 08:12:31

Look mom , no conflict

Here is what I did

structure of external libraries 

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

and then in my angular (javascript)

just copy the directive 

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

and then in my html , just 

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

Thanks everyone

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 'This' conflicts in angular and Jquery jQuery ui datepicker conflicts with custom event? jQuery datepicker in Angular FormControl Angular JS and JQuery datepicker Angular event not working on jquery datepicker How to use JQuery datepicker in Angular? jquery datepicker on angular with 2 different formats Change event with jQuery datepicker and Angular 2 jQuery Conflicts? Input value not updated with JQuery datepicker in Angular 7
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM