jqueryangularjsbootstrap-daterangepickerangular-daterangepicker

angular-daterangepicker not working with angularJs


I have been trying to use angular-daterangepicker in one of my applications. I am following this link:

https://github.com/fragaria/angular-daterangepicker

  1. installed the module.
  2. write dependency in controllers.
  3. add dependency in .html/.ejs file using script tag.
<script src="jquery/dist/jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script src="angular/angular.min.js"></script> 
<script src="moment/moment.js"></script>
<script src="angular-daterangepicker/bootstrap-   daterangepicker/daterangepicker.js"></script>
<script src="angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="angular-daterangepicker/bootstrap-daterangepicker/daterangepicker.css"/>

$scope.datePicker.date = {startDate: null, endDate: null}; //in controller if i use this i get error (2)
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />

Error :

1) TypeError: el.daterangepicker is not a function

2) TypeError: Cannot set property 'date' of undefined

How to get rid of this error?


Solution

  • This is working example - U need to download and include "angular-daterangepicker.min.js" this file From https://github.com/fragaria/angular-daterangepicker

    <head>
        <meta charset="utf-8">
        <title>Daterange picker example</title>
    
        <!-- bower:css -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css" />
        <!-- endbower -->
    
    </head>
    
    <body>
        <!-- bower:js -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-messages.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.js"></script>
        <!-- endbower -->
    
        <script src="angular-daterangepicker-master/js/angular-daterangepicker.min.js"></script>
    
    <div class="container">
        <h1>Daterange picker example</h1>
    
        <div class="row">
            <div class="col-md-6" ng-controller="TestCtrl">
                <form name="dateForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="daterange1" class="control-label">Simple picker</label>
                        <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
                               ng-model="date" required/>
                    </div>
          </form>
    
                <div class="row">
                    <h4>Model:</h4>
                    <div class="col-md-12 well">
                        <label>Date range:</label><br>
                        {{date | json}}<br>
                        <label>Single date:</label><br>
                        {{singleDate | json}}<br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    
    
    <script>
    exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']);
    exampleApp.controller('TestCtrl', function($scope) {
        $scope.date = {
            startDate: null,
            endDate: null
        };
    
    
    });
    
    angular.bootstrap(document, ['example']);</script>
    
    </html>