
Directives are most important components in angularjs application. Although Angularjs ships wide range of directives. But sometimes you will need to create your custom directives. So, Lets started a very important directive ‘Date-Range-Selector’ directives.
we will use bootstrap daterangepicker, momentjs
So, lets start custom directives
angular.module('app'). .directive('dateRange', function() { return { restrict: 'E', scope: { selectedDateRange: '=selectedDateRange', activeCalendar: "=activeCalendarModel", day: "@day", week: "@week", month: "@month", dateRange: "@dateRange", dateChangedCallback: '=', afterLoadCallback: '=' }, templateUrl: 'date_range.html', controller: 'DateRangeCtrl', link: function (scope, element, attrs) { //setup default values for the attributes if not defined if(attrs.day == undefined ){attrs.day = '1';} if(attrs.week == undefined ){attrs.week = '1';} if(attrs.month == undefined ){attrs.month = '1';} if(attrs.dateRange == undefined ){attrs.dateRange = '1';} if (!scope.activeCalendar) { if(attrs.activeCalendar == undefined){ attrs.activeCalendar = 'day'; } scope.activeCalendar = attrs.activeCalendar; } if (scope.afterLoadCallback) { scope.afterLoadCallback(); } } } } )
All parameter are self explanatory 🙂
we have set controller as ‘DateRangeCtrl’.Lets create DateRangeCtrl
angular .module('app.controllers') .controller('DateRangeCtrl', function ($scope, $rootScope, $http, $location, $cookies, $timeout) { $rootScope.dateSelectionCtrlScope = $scope; $scope.loadingChangeDateRange = false; $(".date-separator").daterangepicker({ applyClass: 'btn-primary', startDate: moment().startOf('month'), endDate: moment().endOf('month'), opens: "right", parentEl: "#date-range-selection" }, function(start, end) { $scope.selected.dateRange.start = start.format('YYYY-MM-DD'); $scope.selected.dateRange.end = end.format('YYYY-MM-DD'); $scope.loadingChangeDateRange = true; $scope.changeDateRange(); } ); $(document).on('click', '.applyBtn' , function () { if ($scope.loadingChangeDateRange) { $scope.loadingChangeDateRange = false; } else { $scope.selected.dateRange.start = moment($('#start_date').html()).format('YYYY-MM-DD'); $scope.selected.dateRange.end = moment($('#end_date').html()).format('YYYY-MM-DD'); $scope.changeDateRange(); } }); $scope.selected = []; //**************** dateRange calendar *************** $scope.selected.dateRangeString = []; $scope.selected.dateRange = []; if ($scope.activeCalendar == 'dateRange') { $scope.selected.dateRangeString.start = moment($scope.selectedDateRange.start).format("MMM DD, YYYY"); $scope.selected.dateRangeString.end = moment($scope.selectedDateRange.end).format("MMM DD, YYYY"); $scope.selected.dateRange.start = moment($scope.selectedDateRange.start).format("YYYY-MM-DD"); $scope.selected.dateRange.end = moment($scope.selectedDateRange.end).format("YYYY-MM-DD"); } else { $scope.selected.dateRangeString.start = moment($scope.selectedDateRange.start).startOf('month').format("MMM DD, YYYY"); $scope.selected.dateRangeString.end = moment($scope.selectedDateRange.start).endOf('month').format("MMM DD, YYYY"); $scope.selected.dateRange.start = moment($scope.selectedDateRange.start).startOf('month').format("YYYY-MM-DD"); $scope.selected.dateRange.end = moment($scope.selectedDateRange.start).endOf('month').format("YYYY-MM-DD"); } $scope.changeDateRange = function changeDateRange(){ $scope.selected.dateRangeString.start = moment($scope.selected.dateRange.start).format("MMM DD, YYYY"); $scope.selected.dateRangeString.end = moment($scope.selected.dateRange.end).format("MMM DD, YYYY"); $scope.selectedDateRange.start = moment($scope.selected.dateRange.start).format("YYYY-MM-DD"); $scope.selectedDateRange.end = moment($scope.selected.dateRange.end).format("YYYY-MM-DD"); $scope.selectedDateRange.random = Math.random(); $scope.$apply(); dateChanged(); } //************************************************** $scope.activateCalendar = function activateCalendar(activeCalendar){ $scope.activeCalendar = activeCalendar; switch ($scope.activeCalendar){ case 'dateRange': $(".date-separator").daterangepicker('show'); $timeout(function () { $(".date-separator").click(); }); break; } } $scope.separatorClick = function separatorClick(){ $(".date-separator").click(); } $scope.getActiveCalendar = function() { return $scope.activeCalendar; } var dateChanged = function() { if ($scope.dateChangedCallback != null) { $scope.dateChangedCallback($scope.selectedDateRange); } } }) ;
now time to setup template for DateRange directives
<span class="date-selection-wrapper"> <div class="btn-group btnGroupWeek pull-right"> <button type="button" class="btn tdBtn btn-default" id="dateRangeBtn" ng-click="activateCalendar('dateRange')" ng-if="dateRange!=0" ng-class="{tdBtnActive : activeCalendar == 'dateRange'}" ><translate>Date Range</translate></button> </div> <div class="btn-group date-range-item pull-right" style="margin-left: 30px" id="date-range-selection" ng-show="activeCalendar == 'dateRange'"> <button type="button" class="btn tdBtn btn-default" id="start_date" ng-click="separatorClick()">{{selected.dateRangeString.start}}</button> <button type="button" class="btn tdBtn btn-default date-separator">-</button> <button type="button" class="btn tdBtn btn-default" id="end_date" ng-click="separatorClick()">{{selected.dateRangeString.end}}</button> </div> </span>
Now your directives ready to use your main template. You can use like this
<date-range selected-date-range="selectedDateRange" day="1" week="1" month="0" date-range="1" active-calendar="date-range" active-calendar-model="activeCalendarModel"></date-range>