Last active
August 15, 2016 15:01
-
-
Save jlguenego/b25e1a91c5e0228990f437ca51dc86ea to your computer and use it in GitHub Desktop.
Hello World with Angular JLG Daterangepicker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| var app = angular.module('jlg-daterangepicker', []); | |
| app.directive('input', ['$injector', function($injector) { | |
| return { | |
| restrict: 'E', | |
| require: 'ngModel', | |
| link: function (scope, element, attr, ngModel) { | |
| if (attr.type !== 'daterangepicker') { | |
| return; | |
| } | |
| var $parse = $injector.get('$parse'); | |
| var addEvent = function(on) { | |
| for (var event in on) { | |
| element.on(event, on[event][0]); | |
| } | |
| }; | |
| var removeEvent = function(on) { | |
| for (var event in on) { | |
| element.off(event); | |
| } | |
| }; | |
| scope.$watch(attr.options, function() { | |
| var options = $parse(attr.options)(scope); | |
| element.daterangepicker(options); | |
| var plugin = element.data('daterangepicker'); | |
| if (attr.export) { | |
| scope[attr.export] = plugin; | |
| } | |
| var on = $parse(attr.on)(scope); | |
| addEvent(on); | |
| }, true); | |
| scope.$watch(attr.on, function(newValue, oldValue) { | |
| removeEvent(oldValue); | |
| addEvent(newValue); | |
| }, true); | |
| } | |
| }; | |
| }]); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| var app = angular.module('mainApp', ['jlg-daterangepicker']); | |
| app.run(['$injector', function($injector) { | |
| var $rootScope = $injector.get('$rootScope'); | |
| $rootScope.daterangeOptions = { | |
| locale: { | |
| format: 'DD/MM/YYYY' | |
| }, | |
| autoApply: true | |
| }; | |
| $rootScope.eventObject = {}; | |
| $rootScope.$watch('isEventonShow', function() { | |
| if ($rootScope.isEventonShow) { | |
| $rootScope.eventObject['show.daterangepicker'] = [function() { | |
| console.log('event show.daterangepicker', arguments); | |
| }]; | |
| } else { | |
| delete $rootScope.eventObject['show.daterangepicker']; | |
| } | |
| }); | |
| $rootScope.model = {}; | |
| $rootScope.onSubmit = function() { | |
| console.log('$rootScope.model', $rootScope.model); | |
| window.alert('form submitted. Look at the console.'); | |
| }; | |
| }]); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="mainApp" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <title>Bower test</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-csp.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.24/daterangepicker.css" /> | |
| </head> | |
| <body ng-cloak> | |
| <nav class="navbar navbar-default"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#"> | |
| Angular JLG Daterangepicker | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <form name="form" ng-submit="onSubmit();"> | |
| <div class="form-group"> | |
| <label for="exampleInputEmail1">Date range</label> | |
| <input type="daterangepicker" class="form-control" ng-model="model.daterange" placeholder="Enter a date range" | |
| export="myDaterangepicker" options="daterangeOptions" | |
| on="eventObject" /> | |
| </div> | |
| <button type="submit" class="btn btn-default">Submit</button> | |
| </form> | |
| <div class="checkbox"> | |
| <label> | |
| <input type="checkbox" ng-model="daterangeOptions.autoApply"> autoApply | |
| </label> | |
| </div> | |
| <div class="checkbox"> | |
| <label> | |
| <input type="checkbox" ng-model="isEventonShow"> put event on show | |
| </label> | |
| </div> | |
| <h2>model.daterange</h2> | |
| <pre>{{model.daterange | json }}</pre> | |
| <h2>eventObject</h2> | |
| <pre>{{eventObject | json }}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.24/daterangepicker.js"></script> | |
| <script src="angular-jlg-daterangepicker.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment