jlguenego/angular-jlg-daterangepicker-ex1.js

## angular-jlg-daterangepicker-ex1.js
(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);

			}
		};
	}]);

})();

## app.js
(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.');
		};

	}]);


})();

## example.html
<!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>
	(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);

	}
	};
	}]);

	})();
	(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.');
	};

	}]);



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