AngularJS: Building a Directive that Helps Choose a Date

This is my first AngularJS posts! I am so excited to get it started…

I just finished working on my third AngularJS project. I have used AngularJS in Provider Hosted, SharePoint Hosted and an IIS web application now. I must say that my AngularJS skills and code got better with every project. My last two projects included all best practices mentioned by John Papa: https://github.com/johnpapa/angularjs-styleguide

I wrote a whole bunch of directives and I will talk about them in future posts. I’ll start with very simple (and smart :)) directive. Basically, it helps my users to choose a date quickly. I used a date picker that comes with the UI bootstrap: http://angular-ui.github.io/bootstrap/ to get started and provided my custom directive on top of it which helps you select today’s with one click and move the date forward or backward by a configurable interval . See picture below:

You can use the directive like this:

<div st-date-provider st-config="{title:'Today', daysOffset:1}" st-model="vm.filterC.deliveryDate"></div>

The st-config represents a JavaScript object with following properties

Parameter	Purpose
title	Represents the title that you want to display to represent “Today”
daysOffset	Number of days you want to allow your users to move forward or backward.
minusTitle	Text you want to display for backward button. Optional. For example, you can set daysOffset = 7 and set minusTitle to “- Week”
plusTitle	Text you want to display for forward button. Optional

Another way you can set it up is:

<div st-date-provider st-config="{title:'Today', daysOffset:7,  minusTitle:'Week', plusTitle:'Week'}" st-model="vm.filterC.deliveryDate"></div>

The dependencies for this directive is:

1. moment.js library for date manipulation

 

And finally the code for the Directive is:

app.controller('stDateProviderCtrl', ['$scope', 'common', function ($scope, common) {
        $scope.provideDate = provideDate;
        function provideDate(multiply) {
            if (angular.isNumber($scope.stConfig.daysOffset)) {
                if (!angular.isDate($scope.stModel)) {
                    $scope.stModel = common.getToday();
                    return;
                }


                $scope.stModel = moment($scope.stModel).add('days', $scope.stConfig.daysOffset * multiply).startOf('day').toDate();
            }

        }
    }]);
    app.directive('stDateProvider', ['config', function (config) {
        var directive = {
            restrict: 'EA',
            controller: 'stDateProviderCtrl',
            scope: {
                stModel: "=",
                stConfig: "="

            },
            template:   '<span>' + 
                            '<span class="pointer" ng-click="provideDate(-1)"><i class="fa fa-chevron-circle-left"></i></span>' +
                            '<span class="pointer" ng-if="stConfig.minusTitle" ng-click="provideDate(-1)"> {{stConfig.minusTitle}}</span>' +
                            '<span class="pointer" style="margin-left:10px;margin-right:10px" ng-click="provideDate(1)">{{stConfig.title}}</span>' +
                            '<span class="pointer" ng-if="stConfig.plusTitle" ng-click="provideDate(1)">{{stConfig.plusTitle}} </span>' +
                            '<span class="pointer" ng-click="provideDate(1)"><i class="fa fa-chevron-circle-right"></i></span>' +
                        '</span>'
        };
        return directive;

    }]);

 

Please leave your comments!

del.icio.us Tags: AngularJS,Directive