Date picker pop up goes above input box if it would go of the bottom of the screen

gulpfile.js

@@ -46,7 +46,7 @@ function buildSource (src, dest) {
   min.splice(min.length - 1, 0, 'min');
   min = min.join('.');
   return browserify('./src/' + src)
-    .bundle({ debug: true, standalone: 'rome' })
+	  .bundle({ debug: true, standalone: 'rome'})
     .pipe(source(dest))
     .pipe(streamify(header(extended, { pkg : pkg } )))
     .pipe(gulp.dest('./dist'))

src/calendar.js

@@ -170,10 +170,10 @@ function calendar (calendarOptions) {
     function renderMonth (i) {
       var month = dom({ className: o.styles.month, parent: datewrapper });
       if (i === 0) {
-        back = dom({ type: 'button', className: o.styles.back, attributes: { type: 'button' }, parent: month });
+        back = dom({ type: o.monthsInputs, className: o.styles.back, attributes: { type: 'button' }, parent: month });
       }
       if (i === o.monthsInCalendar -1) {
-        next = dom({ type: 'button', className: o.styles.next, attributes: { type: 'button' }, parent: month });
+        next = dom({ type: o.monthsInputs, className: o.styles.next, attributes: { type: 'button' }, parent: month });
       }
       var label = dom({ className: o.styles.monthLabel, parent: month });
       var date = dom({ type: 'table', className: o.styles.dayTable, parent: month });

src/defaults.js

@@ -73,6 +73,7 @@ function defaults (options, cal) {
   if (o.monthFormat === no) { o.monthFormat = 'MMMM YYYY'; }
   if (o.dayFormat === no) { o.dayFormat = 'DD'; }
   if (o.styles === no) { o.styles = {}; }
+  if (o.monthsInputs === no){o.monthsInputs = 'button'}
 
   o.styles._isStylesConfiguration = true;
 

src/input.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var crossvent = require('crossvent');
-var bullseye = require('bullseye');
+var bullseye = require('./popup');
 var throttle = require('./throttle');
 var clone = require('./clone');
 var defaults = require('./defaults');

src/popup.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var crossvent = require('crossvent');
+var throttle = require('./throttle');
+
+function popup (el, target, options) {
+  var o = options || {};
+  var destroyed = false;
+  var throttledPosition = throttle(position, 30);
+
+  position();
+
+  if (o.tracking !== false) {
+    crossvent.add(window, 'resize', throttledPosition);
+  }
+
+  return {
+    refresh: position,
+    destroy: destroy
+  };
+
+  function position () {
+    if (destroyed) {
+      throw new Error('Popup can\'t refresh after being destroyed. Create another instance instead.');
+    }
+    var bounds = target.getBoundingClientRect();
+    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+	var pageHeight = document.documentElement.clientHeight+scrollTop;
+	  var elSize = getElementSize(el);
+	  var top = bounds.top + scrollTop + target.offsetHeight;
+	  var elBottom = bounds.bottom + elSize.h;
+	  if (elBottom > pageHeight){
+		  top = top - elSize.h - target.offsetHeight;
+	  }
+    el.style.top  = top +'px';
+    el.style.left = bounds.left + 'px';
+
+  }
+
+	function getElementSize(element){
+		//Create unique class
+		var tempId = 'tmp-'+Math.floor(Math.random()*99999);
+		//CloneEl and insert just after
+		var clone = element.cloneNode(true);
+		element.parentNode.appendChild(clone);
+		//Position somewhere far away
+		clone.style.left = '-1000em';
+		// Add Class
+		var classes = clone.className.split(' ');
+		classes.push(tempId);
+		clone.className = classes.join(' ');
+		//Display and get the size
+		clone.style.display = 'block';
+		var tempEl = document.getElementsByClassName(tempId)[0];
+		var elementSize = { h: tempEl.clientHeight,
+							w: tempEl.clientWidth};
+		//remove
+		tempEl.parentNode.removeChild(tempEl);
+
+		return elementSize;
+	}
+
+  function destroy () {
+    crossvent.remove(window, 'resize', throttledPosition);
+    destroyed = true;
+  }
+}
+
+module.exports = popup;