AngularJS – Date Picker – Directive

Description

Alternates between a basic text input and actual Bootstrap UI date picker on click to reduce watchers on a page with multiple date pickers

Dependencies

• AngularJS
• Bootstrap
• Bootstrap UI

Preview Image

HTML

Javascript

/**
 * Date Picker Directive
 *
 * Works on a ng-repeat/muli-row forms
 *
 * A date picker is created on-click of the calender add-on button
 * therefore there is minimal page latency due to minimal listeners
 */
.directive('iteDatePicker', function() {

    var link = function($scope, $element, $attrs, $ngModel) {

        $scope.scope_object = $scope[$attrs.scopeObjectName];
        $scope.scope_object_property = $attrs.scopeObjectProperty;

        $scope.openMultiDatePicker = function($event) {

            $event.preventDefault();
            $event.stopPropagation();
            // scope_object.isOpen = true;
            $scope.scope_object.isOpen = true;
        };

    };

    var template = '' +
        '' +

        // Text Input
        '' +
        '' +

        '' +
        '' +
        '' +
        '' +

        // Date Picker Input
        '' +
        '' +

        '' +
        '' +
        '' +
        '' +

        '';

    return {
        link: link,
        template: template,
        replace: true,
        scope: true
    }

});