From ad667c9e9c1b6d91c1665af27162d613ecbe8b30 Mon Sep 17 00:00:00 2001
From: hxtpoe <hxtpoe@gmail.com>
Date: Mon, 29 Jun 2015 09:54:48 +0200
Subject: [PATCH] feat(datepicker): datepicker position attr

---
 .gitignore                     |  1 +
 src/datepicker/datepicker.js   | 29 ++++++++++++++++++++++++++---
 src/datepicker/docs/demo.html  |  2 +-
 src/datepicker/docs/readme.md  |  4 ++++
 template/datepicker/popup.html | 17 +++++++++++------
 5 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index d106a75394..cf5742df1b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ lib-cov
 *.swp
 *.swo
 .DS_Store
+.idea
 
 pids
 logs
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index a98b48dc7e..656990f7bf 100644
--- a/src/datepicker/datepicker.js
+++ b/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,
@@ -681,8 +683,29 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       scope.$watch('isOpen', function(value) {
         if (value) {
           scope.$broadcast('datepicker.focus');
-          scope.position = appendToBody ? $position.offset(element) : $position.position(element);
-          scope.position.top = scope.position.top + element.prop('offsetHeight');
+          scope.popupPosition = appendToBody ? $position.offset(element) : $position.position(element);
+
+          var clearPosition = function() {
+            scope.popupPosition.top = scope.popupPosition.bottom = scope.popupPosition.left = scope.popupPosition.right = 'initial';
+          };
+
+          if (!scope.position || scope.position === 'bottom-left') {
+            clearPosition();
+            scope.popupPosition.left = 0;
+            scope.popupPosition.top = $position.position(element).height  + 'px';
+          } else if (scope.position === 'bottom-right') {
+            clearPosition();
+            scope.popupPosition.right = 0;
+            scope.popupPosition.top = $position.position(element).height  + 'px';
+          } else if (scope.position === 'top-right') {
+            clearPosition();
+            scope.popupPosition.right = 0;
+            scope.popupPosition.bottom = $position.position(element).height + 'px';
+          } else if (scope.position === 'top-left') {
+            clearPosition();
+            scope.popupPosition.left = 0;
+            scope.popupPosition.bottom = $position.position(element).height + 'px';
+          }
 
           $document.bind('click', documentClickBind);
         } else {
diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
index 7ea3b98fd2..477e429476 100644
--- a/src/datepicker/docs/demo.html
+++ b/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>
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md
index baa493d234..5365b69cb6 100644
--- a/src/datepicker/docs/readme.md
+++ b/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.
diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
index 483bbe1e7f..e6a01c87ac 100644
--- a/template/datepicker/popup.html
+++ b/template/datepicker/popup.html
@@ -1,10 +1,15 @@
-<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: popupPosition.top,
+left: popupPosition.left,
+right: popupPosition.right,
+bottom: popupPosition.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-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>
\ No newline at end of file