AngularJS - Bootstrap Datepicker Model Formatter

I have case to show datepicker for textbox, we can simply bind DateString field to textbox and update. But if we use BootStrap uibDatePicker then it requires to format as Date object before binding to ngModel.

So to resolve this issue, i have created directive to format ngModel value before binding and also parse back to string before updating to controller.

To check how to create BootStrap datepicker check here http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/datepickerPopup 

Just create Directive as follows

    app.directive('datePickerModelFormatter', function () {

        return {

            restrict: 'A',

            require: 'ngModel',

            link: function (scope, element, attr, ngModel) {

                function dateToString(dateValue) {

                    if (dateValue != null) {

                        var dateTimeToReturn = new Date(dateValue);

                        return dateTimeToReturn.toISOString();

                    }

                    return dateValue;

                }

                function stringToDate(stringValue) {

                    if (stringValue != null) {

                        var newOffsetDateTime = new Date(stringValue);

                        return new Date(newOffsetDateTime.setMinutes(newOffsetDateTime.getMinutes() + newOffsetDateTime.getTimezoneOffset()));

                    }

                    return stringValue;

                }

                ngModel.$parsers.push(dateToString);

                ngModel.$formatters.push(stringToDate);

            }

        };

    });

and on HTML just include this model

  <p class="input-group">

          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" date-picker-model-formatter />

          <span class="input-group-btn">

            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

          </span>

        </p>

Thats it, it will convert to DateObject and Return back as StringObject (ISOString format)

AngularJS - Multiselect Drop down

In some cases, we need to create multi select dropdown. With AngularJS directive it is very easier to implement

Okay, let me first show basic multi select dropdown without any angularJS

<select data-ng-model="model" data-ng-options="value as name for item in itemlist" multiple>

    <option value="" style="color:gray;">-Select Item-</option>

</select>

Here we used simple Select element with multiple attribute. It allows you to select multiple items from dropdown. But drawback is, we should use Ctrl key to select multiple items and also style is not that much easier to customize.


To resolve these dependencies, we can choose AngularJS directive as solution.

app.directive('multiSelectDropDown', function () {

        return {

            restrict: 'AE',

            scope: {

                model: '=',

                options: '=',

                optionsName: '@',

                optionsValue: '@',

            },

            template: "<div class='btn-group dropdown' style='width:100%'>" +

             "<input type='text' value='{{model.toString()}}' data-toggle='dropdown' class='dropdown-toggle' placeholder='Click to select' disabled>" +

             "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button>" +

                     "<ul class='dropdown-menu' style='width:100%'  aria-labelledby='dropdownMenu'>" +

                         "<li><a data-ng-click='selectAll()'><i class='glyphicon glyphicon-ok'></i>  Select All</a></li>" +

                         "<li><a data-ng-click='deselectAll();'><i class='glyphicon glyphicon-remove'></i>  Deselect All</a></li>" +

                         "<li class='divider'></li>" +

                         "<li data-ng-repeat='option in options'>" +

                         "<a data-ng-click='setSelectedItem()'><span class=\"{{isChecked(option) ? 'glyphicon glyphicon-ok' : ''}}\"></span>&nbsp;{{option[''+optionsName+'']}}&nbsp;</a>" +

                         "</li>" +

                     "</ul>" +

                 "</div>",

            controller: function ($scope) {

                $scope.selectAll = function () {

                    $scope.model = [];

                    $scope.options.forEach(function (option, index) {

                        $scope.model.push(option[$scope.optionsValue]);

                    });

                };

                $scope.deselectAll = function () {

                    $scope.model = [];

                };

                $scope.setSelectedItem = function () {

                    var selected = this.option;

                    if ($scope.model == undefined || $scope.model == null)

                        model = [];

                    if (_.contains($scope.model, selected[$scope.optionsValue])) {

                        $scope.model = _.without($scope.model, selected[$scope.optionsValue]);

                    } else {

                        $scope.model.push(selected[$scope.optionsValue]);

                    }

                    return $scope.model;

                };

                $scope.isChecked = function (selected) {

                    if ($scope.model == undefined || $scope.model == null)

                        $scope.model = [];

                    if (_.contains($scope.model, selected[$scope.optionsValue])) {

                        return true;

                    }

                    return false;

                };

            }

        }

    });

This directive you can include into your AngularJS application as directive

 var app = angular.module('yourAppName');


In HTML, we can call this directive simply like below

 <multi-select-drop-down model="model" options="itemlist" options-name="name" options-value="value "></multi-select-drop-down>

This requires BootStrap css file, Glyphicons to make work.