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 } });
Leave a Reply