Added ignore limits flag and open direction checking

AlexKrupko · Sep 11, 2017 · 938980e · 938980e
1 parent 2c0a606
commit 938980e
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -13,7 +13,7 @@
 
             $min.DatePickerX.init({
                 mondayFirst: true,
-                minDate    : new Date(2016, 2, 1),
+                minDate    : new Date(2017, 8, 13),
                 maxDate    : $max
             });
 
@@ -46,12 +46,14 @@
     <input type="text" name="realDPX-min" placeholder="Choice start date">
 </label>
 
-<label class="real">
-    <input type="text" name="realDPX-max" placeholder="Choice end date">
-</label>
+<div style="margin-top: 80vh;">
+    <label class="real">
+        <input type="text" name="realDPX-max" placeholder="Choice end date">
+    </label>
+</div>
 
 
-<label>
+<label class="date-picker-x-container">
 <input type="text" name="dp">
 <div class="date-picker-x active" data-dpx-type="day">
     <div class="dpx-title-box">
@@ -117,7 +119,7 @@
 </div>
 </label>
 
-<label>
+<label class="date-picker-x-container">
 <input type="text" name="dp">
 <div class="date-picker-x active" data-dpx-type="month">
     <div class="dpx-title-box">
@@ -149,7 +151,7 @@
 </div>
 </label>
 
-<label>
+<label class="date-picker-x-container">
 <input type="text" name="dp">
 <div class="date-picker-x active" data-dpx-type="year">
     <div class="dpx-title-box">

diff --git a/dist/css/DatePickerX.css b/dist/css/DatePickerX.css
@@ -9,9 +9,13 @@
  * @copyright 2016 Avrora Team www.avrora.team
  * @license   MIT
  * @tutorial  http://datepickerx.avrora.team
- * @version   1.0.1
+ * @version   1.0.2
  */
 
+.date-picker-x-container {
+	position: relative;
+}
+
 .date-picker-x {
 	background: #444;
 	box-sizing: content-box;
@@ -20,6 +24,7 @@
 	font: 18px/1 Arial;
 	padding: 10px;
 	position: absolute;
+	top: 100%;
 	-webkit-transform: translateY(15px);
 	transform: translateY(15px);
 	-webkit-user-select: none;
@@ -40,6 +45,19 @@
 	position: absolute;
 }
 
+.date-picker-x.to-top {
+	bottom: 100%;
+	top: initial;
+	-webkit-transform: translateY(-15px);
+	transform: translateY(-15px);
+}
+
+.date-picker-x.to-top::before {
+	border-width: 10px 10px 0;
+	bottom: initial;
+	top: 100%;
+}
+
 .date-picker-x.active {
 	display: block;
 }
@@ -71,7 +89,6 @@
 	font-size: 22px;
 	line-height: 50px;
 	text-align: center;
-	-webkit-transition: .2s;
 	transition: .2s;
 	width: 50px;
 }

diff --git a/dist/css/DatePickerX.min.css b/dist/css/DatePickerX.min.css
diff --git a/dist/js/DatePickerX.js b/dist/js/DatePickerX.js
@@ -9,7 +9,7 @@
  * @copyright 2016 Avrora Team www.avrora.team
  * @license   MIT
  * @tutorial  http://datepickerx.avrora.team
- * @version   1.0.1
+ * @version   1.0.2
  */
 
 !function()
@@ -205,6 +205,10 @@
                     mode = 2;
                     draw();
                     elements.container.classList.add('active');
+                    elements.container.classList.remove('to-top');
+
+                    var bcr = elements.container.getBoundingClientRect();
+                    bcr.bottom > window.innerHeight && bcr.top > elements.container.offsetHeight && elements.container.classList.add('to-top');
 
                     openedDPX && openedDPX !== elements.container && openedDPX.classList.remove('active');
                     openedDPX = elements.container;
@@ -449,6 +453,7 @@
                 }
 
                 // DPX init
+                input.parentNode.classList.add('date-picker-x-container');
                 input.classList.add('date-picker-x-input');
                 input.readOnly = true;
                 createElements();
@@ -480,10 +485,11 @@
              * If passed not Date object, method will try to convert it to date.
              * If passed null, method will clear date.
              *
-             * @param   {*}       dt Date object
+             * @param   {*}       dt                   Date object
+             * @param   {Boolean} [ignoreLimits=false] If passed true min and max limits will be ignored
              * @returns {Boolean}
              */
-            setValue: function(dt)
+            setValue: function(dt, ignoreLimits)
             {
                 if (!inited) {
                     return console.error('DatePickerX, remove: Date picker doesn\'t init yet.') && false;
@@ -499,7 +505,7 @@
                         return console.error('DatePickerX, setValue: Can\'t convert argument to date.') && false;
                     }
 
-                    if (dt.getTime() < getMinDate().getTime() || dt.getTime() > getMaxDate().getTime()) {
+                    if (!ignoreLimits && (dt.getTime() < getMinDate().getTime() || dt.getTime() > getMaxDate().getTime())) {
                         return console.error('DatePickerX, setValue: Date out of acceptable range.') && false;
                     }
 

diff --git a/dist/js/DatePickerX.min.js b/dist/js/DatePickerX.min.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "DatePickerX",
   "title": "DatePickerX",
   "description": "Cool light visual date picker on pure JavaScript",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "homepage": "https://datepickerx.avrora.team",
   "repository": {
     "type": "git",

diff --git a/src/js/DatePickerX.js b/src/js/DatePickerX.js
@@ -191,6 +191,10 @@
                     mode = 2;
                     draw();
                     elements.container.classList.add('active');
+                    elements.container.classList.remove('to-top');
+
+                    var bcr = elements.container.getBoundingClientRect();
+                    bcr.bottom > window.innerHeight && bcr.top > elements.container.offsetHeight && elements.container.classList.add('to-top');
 
                     openedDPX && openedDPX !== elements.container && openedDPX.classList.remove('active');
                     openedDPX = elements.container;
@@ -435,6 +439,7 @@
                 }
 
                 // DPX init
+                input.parentNode.classList.add('date-picker-x-container');
                 input.classList.add('date-picker-x-input');
                 input.readOnly = true;
                 createElements();
@@ -466,10 +471,11 @@
              * If passed not Date object, method will try to convert it to date.
              * If passed null, method will clear date.
              *
-             * @param   {*}       dt Date object
+             * @param   {*}       dt                   Date object
+             * @param   {Boolean} [ignoreLimits=false] If passed true min and max limits will be ignored
              * @returns {Boolean}
              */
-            setValue: function(dt)
+            setValue: function(dt, ignoreLimits)
             {
                 if (!inited) {
                     return console.error('DatePickerX, remove: Date picker doesn\'t init yet.') && false;
@@ -485,7 +491,7 @@
                         return console.error('DatePickerX, setValue: Can\'t convert argument to date.') && false;
                     }
 
-                    if (dt.getTime() < getMinDate().getTime() || dt.getTime() > getMaxDate().getTime()) {
+                    if (!ignoreLimits && (dt.getTime() < getMinDate().getTime() || dt.getTime() > getMaxDate().getTime())) {
                         return console.error('DatePickerX, setValue: Date out of acceptable range.') && false;
                     }
 

diff --git a/src/sass/DatePickerX.scss b/src/sass/DatePickerX.scss
@@ -1,5 +1,8 @@
 @import "variables";
 
+.date-picker-x-container {
+    position: relative;
+}
 .date-picker-x {
     background: $dpxBackgroundColor;
     box-sizing: content-box;
@@ -8,6 +11,7 @@
     font: 18px/1 Arial;
     padding: 10px;
     position: absolute;
+    top: 100%;
     transform: translateY(15px);
     user-select: none;
     width: $dpxDaySize * 7;
@@ -22,6 +26,17 @@
         left: 20px;
         position: absolute;
     }
+    &.to-top {
+        bottom: 100%;
+        top: initial;
+        transform: translateY(-15px);
+
+        &::before {
+            border-width: 10px 10px 0;
+            bottom: initial;
+            top: 100%;
+        }
+    }
     &.active {
         display: block;
     }