diff --git a/README.md b/README.md index 2c486301..1a5c0c6b 100755 --- a/README.md +++ b/README.md @@ -177,6 +177,17 @@ $('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042); ``` +### Formatting + +If the `reposition` configuration-option is enabled (default), Pikaday will apply CSS-classes to the datepicker according to how it is positioned: + +* `top-aligned` +* `left-aligned` +* `right-aligned` +* `bottom-aligned` + +Note that the DOM element at any time will typically have 2 CSS-classes (eg. `top-aligned right-aligned` etc). + ## AMD support If you use a modular script loader than Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module. diff --git a/pikaday.js b/pikaday.js index ba7aca06..45ec89de 100755 --- a/pikaday.js +++ b/pikaday.js @@ -1032,7 +1032,7 @@ adjustPosition: function() { - var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect; + var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect, leftAligned, bottomAligned; if (this._o.container) return; @@ -1045,6 +1045,8 @@ viewportWidth = window.innerWidth || document.documentElement.clientWidth; viewportHeight = window.innerHeight || document.documentElement.clientHeight; scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; + leftAligned = true; + bottomAligned = true; if (typeof field.getBoundingClientRect === 'function') { clientRect = field.getBoundingClientRect(); @@ -1067,6 +1069,7 @@ ) ) { left = left - width + field.offsetWidth; + leftAligned = false; } if ((this._o.reposition && top + height > viewportHeight + scrollTop) || ( @@ -1075,10 +1078,16 @@ ) ) { top = top - height - field.offsetHeight; + bottomAligned = false; } this.el.style.left = left + 'px'; this.el.style.top = top + 'px'; + + addClass(this.el, leftAligned ? 'left-aligned' : 'right-aligned'); + addClass(this.el, bottomAligned ? 'bottom-aligned' : 'top-aligned'); + removeClass(this.el, !leftAligned ? 'left-aligned' : 'right-aligned'); + removeClass(this.el, !bottomAligned ? 'bottom-aligned' : 'top-aligned'); }, /**