lightpick - npm Package Compare versions

Comparing version 1.1.2 to 1.2.1

CHANGELOG.md

 # Changelog
 All notable changes to this project will be documented in this file.
 
+[1.2.0] - 2018-08-23
+* new option: disabledDatesInRange
+* new option: tooltipNights
+
 [1.1.2] - 2018-08-22
@@ -5,0 +9,0 @@ * new option: footer

lightpick.js

@@ -55,2 +55,4 @@ /**
         footer: false,
+        disabledDatesInRange: true,
+        tooltipNights: false,
         locale: {
@@ -98,3 +100,3 @@ buttons: {
             extraClass = extraClass.filter( function( el ) {
-                return ['is-start-date', 'is-in-range', 'is-end-date', 'is-disabled', 'is-flipped'].indexOf( el ) < 0;
+                return ['is-start-date', 'is-in-range', 'is-end-date', 'is-disabled', 'is-flipped', 'is-forward-selected'].indexOf( el ) < 0;
             });
@@ -107,7 +109,36 @@ day.className = day.className.concat(extraClass);
 
+        if (opts.disableDates) {
+            for (var i = 0; i < opts.disableDates.length; i++) {
+                if (opts.disableDates[i] instanceof Array || Object.prototype.toString.call(opts.disableDates[i]) === '[object Array]') {
+                    var _from = moment(opts.disableDates[i][0]),
+                        _to = moment(opts.disableDates[i][1]);
+
+                    if (_from.isValid() && _to.isValid() && date.isBetween(_from, _to, 'day', '[]')){
+                        day.className.push('is-disabled');
+                    }
+                }
+                else if (moment(opts.disableDates[i]).isValid() && moment(opts.disableDates[i]).isSame(date, 'day')) {
+                    day.className.push('is-disabled');
+                }
+
+                if (day.className.indexOf('is-disabled') >= 0) {
+                    if (day.className.indexOf('is-start-date') >= 0) {
+                        this.setStartDate(null);
+                        this.setEndDate(null);
+                    }
+                    else if (day.className.indexOf('is-end-date') >= 0) {
+                        this.setEndDate(null);
+                    }
+                }
+            }
+        }
+
         if (opts.minDays && opts.startDate && !opts.endDate) {
-            if (
-                date.isBetween(moment(opts.startDate).subtract(opts.minDays - 1, 'day'), moment(opts.startDate).add(opts.minDays - 1, 'day'), 'day')
-            ) {
+            if (date.isBetween(moment(opts.startDate).subtract(opts.minDays - 1, 'day'), moment(opts.startDate).add(opts.minDays - 1, 'day'), 'day')) {
                 day.className.push('is-disabled');
+
+                if (opts.selectForward && date.isSameOrAfter(opts.startDate)) {
+                    day.className.push('is-forward-selected');
+                    day.className.push('is-in-range');
+                }
             }
@@ -167,29 +198,2 @@ }
 
-        if (opts.disableDates) {
-            for (var i = 0; i < opts.disableDates.length; i++) {
-                if (opts.disableDates[i] instanceof Array || Object.prototype.toString.call(opts.disableDates[i]) === '[object Array]') {
-                    if (moment(opts.disableDates[i][0]).isValid()
-                        && moment(opts.disableDates[i][1]).isValid()
-                        && date.isBetween(moment(opts.disableDates[i][0]), moment(opts.disableDates[i][1]), 'day', '[]')){
-
-                        day.className.push('is-disabled');
-
-                    }
-                }
-                else if (moment(opts.disableDates[i]).isValid() && moment(opts.disableDates[i]).isSame(date, 'day')) {
-                    day.className.push('is-disabled');
-                }
-
-                if (day.className.indexOf('is-disabled') >= 0) {
-                    if (day.className.indexOf('is-start-date') >= 0) {
-                        this.setStartDate(null);
-                        this.setEndDate(null);
-                    }
-                    else if (day.className.indexOf('is-end-date') >= 0) {
-                        this.setEndDate(null);
-                    }
-                }
-            }
-        }
-
         day.className = day.className.filter(function(value, index, self) {
@@ -313,4 +317,37 @@ return self.indexOf(value) === index;
         });
+
+        checkDisabledDatesInRange(el, opts);
     },
 
+    checkDisabledDatesInRange = function(el, opts)
+    {
+        if (opts.disabledDatesInRange || !opts.startDate || opts.endDate || !opts.disableDates) return;
+
+        var days = el.querySelectorAll('.lightpick__day'),
+            disabledArray = opts.disableDates.map(function(entry){
+                return entry instanceof Array || Object.prototype.toString.call(entry) === '[object Array]' ? entry[0] : entry;
+            }),
+            closestPrev = disabledArray.filter(function(d) {
+                return d.isBefore(opts.startDate);
+            }).sort(function(a,b){
+                return b.isAfter(a);
+            })[0],
+            closestNext = disabledArray.filter(function(d) {
+                return d.isAfter(opts.startDate);
+            }).sort(function(a,b){
+                return a.isAfter(b);
+            })[0];
+
+        [].forEach.call(days, function(dayCell) {
+            var day = moment(parseInt(dayCell.getAttribute('data-time')));
+            if (
+                (closestPrev && day.isBefore(closestPrev) && opts.startDate.isAfter(closestPrev)) 
+                || (closestNext && day.isAfter(closestNext) && closestNext.isAfter(opts.startDate))
+            ) {
+                dayCell.classList.remove('is-available');
+                dayCell.classList.add('is-disabled');
+            }
+        });
+    },
+
     plural = function(value, arr) 
@@ -346,2 +383,3 @@ {
                 html += '<button type="button" class="lightpick__reset-action">' + opts.locale.buttons.reset + '</button>';
+                html += '<div class="lightpick__footer-message"></div>';
                 html += '<button type="button" class="lightpick__apply-action">' + opts.locale.buttons.apply + '</button>';
@@ -376,21 +414,51 @@ }
 
+            var opts = self._opts;
+
             if (target.classList.contains('lightpick__day') && target.classList.contains('is-available')) {
 
-                if (self._opts.singleDate || (!self._opts.startDate && !self._opts.endDate) || (self._opts.startDate && self._opts.endDate)) {
+                var day = moment(parseInt(target.getAttribute('data-time')));
 
-                    if (self._opts.repick && self._opts.startDate && self._opts.endDate) {
-                        if (self._opts.repickTrigger === self._opts.field) {
-                            self.setStartDate(moment(parseInt(target.getAttribute('data-time'))));
+                if (!opts.disabledDatesInRange && opts.disableDates && opts.startDate) {
+                    var start = day.isAfter(opts.startDate) ? moment(opts.startDate) : moment(day),
+                        end = day.isAfter(opts.startDate) ? moment(day) : moment(opts.startDate),
+                        
+                        isInvalidRange = opts.disableDates.filter(function(d) {
+                        if (d instanceof Array || Object.prototype.toString.call(d) === '[object Array]') {
+                            var _from = moment(d[0]),
+                                _to = moment(d[1]);
+        
+                            return _from.isValid() && _to.isValid() && (_from.isBetween(start, end, 'day', '[]') || _to.isBetween(start, end, 'day', '[]'));
+                        }
+                        
+                        return moment(d).isBetween(start, end, 'day', '[]');
+                    });
+
+                    if (isInvalidRange.length) {
+                        self.setStartDate(null);
+                        self.setEndDate(null);
+
+                        target.dispatchEvent(new Event('mousedown'));
+                        self.el.querySelector('.lightpick__tooltip').style.visibility = 'hidden';
+
+                        updateDates(self.el, opts);
+                        return;
+                    }
+                }
+
+                if (opts.singleDate || (!opts.startDate && !opts.endDate) || (opts.startDate && opts.endDate)) {
+                    if (opts.repick && opts.startDate && opts.endDate) {
+                        if (opts.repickTrigger === opts.field) {
+                            self.setStartDate(day);
                             target.classList.add('is-start-date');
                         }
                         else {
-                            self.setEndDate(moment(parseInt(target.getAttribute('data-time'))));
+                            self.setEndDate(day);
                             target.classList.add('is-end-date');
                         }
 
-                        if (self._opts.startDate.isAfter(self._opts.endDate)) {
+                        if (opts.startDate.isAfter(opts.endDate)) {
                             self.swapDate();
                         }
 
-                        if (self._opts.autoclose) {
+                        if (opts.autoclose) {
                             setTimeout(function() {
@@ -402,3 +470,3 @@ self.hide();
                     else {
-                        self.setStartDate(moment(parseInt(target.getAttribute('data-time'))));
+                        self.setStartDate(day);
                         self.setEndDate(null);
@@ -408,3 +476,3 @@
 
-                        if (self._opts.singleDate && self._opts.autoclose) {
+                        if (opts.singleDate && opts.autoclose) {
                             setTimeout(function() {
@@ -414,11 +482,11 @@ self.hide();
                         }
-                        else if (!self._opts.singleDate) {
-                            updateDates(self.el, self._opts);
+                        else if (!opts.singleDate) {
+                            updateDates(self.el, opts);
                         }
                     }
                 }
-                else if (self._opts.startDate && !self._opts.endDate) {
-                    self.setEndDate(moment(parseInt(target.getAttribute('data-time'))));
+                else if (opts.startDate && !opts.endDate) {
+                    self.setEndDate(day);
 
-                    if (self._opts.startDate.isAfter(self._opts.endDate)) {
+                    if (opts.startDate.isAfter(opts.endDate)) {
                         self.swapDate();
@@ -429,3 +497,4 @@ }
 
-                    if (self._opts.autoclose) {
+
+                    if (opts.autoclose) {
                         setTimeout(function() {
@@ -436,5 +505,24 @@ self.hide();
                     else {
-                        updateDates(self.el, self._opts);
+                        updateDates(self.el, opts);
                     }
                 }
+
+                if (!opts.disabledDatesInRange) {
+                    if (self.el.querySelectorAll('.lightpick__day.is-available').length === 0) {
+                        self.setStartDate(null);
+                        updateDates(self.el, opts);
+
+                        if (opts.footer) {
+                            var footerMessage = self.el.querySelector('.lightpick__footer-message');
+    
+                            if (footerMessage) {
+                                footerMessage.innerHTML = opts.locale.not_allowed_range;
+        
+                                setTimeout(function(){
+                                    footerMessage.innerHTML = '';
+                                }, 3000);
+                            }
+                        }
+                    }
+                }
             }
@@ -485,3 +573,3 @@ else if (target.classList.contains('lightpick__previous-action')) {
                     self.el.querySelector('.lightpick__months').innerHTML = '';
-                    renderMonthsOfYear(self.el, self._opts, target.getAttribute('data-ym'));
+                    renderMonthsOfYear(self.el, opts, target.getAttribute('data-ym'));
                 }
@@ -568,4 +656,8 @@ }
                 if (opts.hoveringTooltip) {
-                    days = Math.abs(hoverDate.isAfter(startDate) ? hoverDate.diff(startDate, 'day') : startDate.diff(hoverDate, 'day')) + 1;
+                    days = Math.abs(hoverDate.isAfter(startDate) ? hoverDate.diff(startDate, 'day') : startDate.diff(hoverDate, 'day'));
 
+                    if (!opts.tooltipNights) {
+                        days += 1;
+                    }
+
                     var tooltip = self.el.querySelector('.lightpick__tooltip');
@@ -790,2 +882,4 @@
             renderCalendar(this.el, this._opts);
+
+            checkDisabledDatesInRange(this.el, this._opts);
         },
@@ -798,2 +892,4 @@
             renderCalendar(this.el, this._opts);
+
+            checkDisabledDatesInRange(this.el, this._opts);
         },
@@ -1035,2 +1131,4 @@
             }
+
+            this.el.querySelector('.lightpick__tooltip').style.visibility = 'hidden';
         },
@@ -1037,0 +1135,0 @@

package.json

 {
   "name": "lightpick",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Javascript date range picker - lightweight, no jQuery",
@@ -5,0 +5,0 @@ "main": "lightpick.js",

README.md

@@ -179,2 +179,8 @@ [![npm version](https://badge.fury.io/js/lightpick.svg)](https://www.npmjs.com/package/lightpick) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/wakirin/lightpick/blob/master/LICENSE)
 
+### disabledDatesInRange
+- Type: `Boolean`
+- Default: `true`
+
+If set to `false` then will reset selected range when disabled dates exists in selected range.
+
 ### locale
@@ -181,0 +187,0 @@ - Type: `Object`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102939

increased by4.89%

Lines of code

1738

increased by5.08%

Number of lines in readme file

262

increased by2.34%

No dependency changes