feat(datepicker): datepicker position attr

.gitignore

@@ -9,6 +9,7 @@ lib-cov
 *.swp
 *.swo
 .DS_Store
+.idea
 
 pids
 logs

src/datepicker/datepicker.js

@@ -471,7 +471,9 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       clearText: '@',
       closeText: '@',
       dateDisabled: '&',
-      customClass: '&'
+      customClass: '&',
+      position: '@'
+
     },
     link: function(scope, element, attrs, ngModel) {
       var dateFormat,
@@ -682,7 +684,28 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
         if (value) {
           scope.$broadcast('datepicker.focus');
           scope.position = appendToBody ? $position.offset(element) : $position.position(element);
-          scope.position.top = scope.position.top + element.prop('offsetHeight');
+
+          var clearPosition = function() {
+            scope.position.top = scope.position.bottom = scope.position.left = scope.position.right = 'initial';
+          };
+
+          if (!scope.position || scope.position === 'bottom-left') {
+            clearPosition();
+            scope.position.left = 0;
+            scope.position.top = $position.position(element).height  + 'px';
+          } else if (scope.position === 'bottom-right') {
+            clearPosition();
+            scope.position.right = 0;
+            scope.position.top = $position.position(element).height  + 'px';
+          } else if (scope.position === 'top-right') {
+            clearPosition();
+            scope.position.right = 0;
+            scope.position.bottom = $position.position(element).height + 'px';
+          } else if (scope.position === 'top-left') {
+            clearPosition();
+            scope.position.left = 0;
+            scope.position.bottom = $position.position(element).height + 'px';
+          }
 
           $document.bind('click', documentClickBind);
         } else {

src/datepicker/docs/demo.html

@@ -22,7 +22,7 @@ <h4>Popup</h4>
     <div class="row">
         <div class="col-md-6">
             <p class="input-group">
-              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+              <input type="text" class="form-control" position="top-right" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
               <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
               </span>

src/datepicker/docs/readme.md

@@ -119,6 +119,10 @@ Specific settings for the `datepicker-popup`, that can globally configured throu
   _(Default: false)_:
   Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `datepickerPopupConfig.appendToBody`.
 
+ * `position`
+  _(Default: 'bottom-left')_ :
+  Where datepicker should be displayed. Options _(bottom-left|bottom-right|top-left|top-right)_
+
 ### Keyboard Support ###
 
 Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.

template/datepicker/popup.html

@@ -1,10 +1,16 @@
-<ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
-	<li ng-transclude></li>
-	<li ng-if="showButtonBar" style="padding:10px 9px 2px">
+<ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none',
+position: 'absolute',
+top: position.top,
+left: position.left,
+right: position.right,
+bottom: position.bottom}" ng-keydown="keydown($event)">
+    <li ng-transclude></li>
+    <li ng-if="showButtonBar" style="padding:10px 9px 2px">
 		<span class="btn-group pull-left">
-			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
+			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}
+            </button>
 			<button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
 		</span>
-		<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
-	</li>
-</ul>
+        <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
+    </li>
+</ul>