lightpick - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

 # Changelog
 All notable changes to this project will be documented in this file.
 
+[0.0.6] - 2018-06-20
+* Added option `repick` 
+
 [0.0.4] - 2018-06-18
@@ -5,0 +8,0 @@ * Added tooltip

demo.js

@@ -46,2 +46,3 @@ var rangeText = function (start, end) {
         'https://gist.github.com/wakirin/8fdf443726f097326d927e0e85dbc5dd.json?callback=callbackJson',
+        'https://gist.github.com/wakirin/a10bbe7a2d22d1c285cd4763e4a5de80.json?callback=callbackJson',
     ];
@@ -154,2 +155,14 @@
     }
+});
+
+// demo-11
+new lightPick({
+    field: document.getElementById('demo-11_1'),
+    secondField: document.getElementById('demo-11_2'),
+    repick: true,
+    startDate: moment().startOf('month').add(7, 'day'),
+    endDate: moment().add(1, 'month').endOf('month').subtract(7, 'day'),
+    onSelect: function(start, end){
+        document.getElementById('result-11').innerHTML = rangeText(start, end);
+    }
 });

lightpick.js

@@ -22,3 +22,3 @@ /**
     }
-}(this, function(moment, $) {
+}(this, function(moment) {
     'use strict';
@@ -70,2 +70,3 @@ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
         autoclose: true,
+        repick: false,
         startDate: null,
@@ -348,28 +349,45 @@ endDate: null,
 
-                    self.setStartDate(moment(parseInt(target.getAttribute('data-time'))));
-                    self.setEndDate(null);
+                    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'))));
+                            target.classList.add('start-date');
+                        }
+                        else {
+                            self.setEndDate(moment(parseInt(target.getAttribute('data-time'))));
+                            target.classList.add('end-date');
+                        }
 
-                    target.classList.add('start-date');
+                        if (self._opts.startDate.isAfter(self._opts.endDate)) {
+                            self.swapDate();
+                        }
 
-                    if (self._opts.singleDate && self._opts.autoclose) {
-                        setTimeout(function() {
-                            self.hide();
-                        }, 100);
+                        if (self._opts.autoclose) {
+                            setTimeout(function() {
+                                self.hide();
+                            }, 100);
+                        }
                     }
-                    else if (!self._opts.singleDate) {
-                        updateDates(self.el, self._opts);
+                    else {
+                        self.setStartDate(moment(parseInt(target.getAttribute('data-time'))));
+                        self.setEndDate(null);
+    
+                        target.classList.add('start-date');
+
+                        if (self._opts.singleDate && self._opts.autoclose) {
+                            setTimeout(function() {
+                                self.hide();
+                            }, 100);
+                        }
+                        else if (!self._opts.singleDate) {
+                            updateDates(self.el, self._opts);
+                        }
                     }
                 }
                 else if (self._opts.startDate && !self._opts.endDate) {
+                    self.setEndDate(moment(parseInt(target.getAttribute('data-time'))));
 
-                    var endDate = moment(parseInt(target.getAttribute('data-time')));
-
-                    if (self._opts.startDate.isAfter(endDate, 'day')) {
-                        var tmp = moment(self._opts.startDate);
-                        self._opts.startDate = moment(endDate);
-                        endDate = moment(tmp);
+                    if (self._opts.startDate.isAfter(self._opts.endDate)) {
+                        self.swapDate();
                     }
 
-                    self.setEndDate(endDate);
-
                     target.classList.add('end-date');
@@ -417,3 +435,3 @@
 
-            if (opts.startDate && !opts.endDate) {
+            if ((opts.startDate && !opts.endDate) || opts.repick) {
                 var hoverDate = moment(parseInt(target.getAttribute('data-time')));
@@ -425,2 +443,4 @@
 
+                var startDate = (opts.startDate && !opts.endDate) || (opts.repick && opts.repickTrigger === opts.secondField) ? opts.startDate : opts.endDate;
+
                 var days = self.el.querySelectorAll('.day');
@@ -432,7 +452,15 @@ [].forEach.call(days, function(day) {
 
-                    if (dt.isValid() && dt.isSameOrAfter(opts.startDate, 'day') && dt.isSameOrBefore(hoverDate, 'day')) {
+                    if (dt.isValid() && dt.isSameOrAfter(startDate, 'day') && dt.isSameOrBefore(hoverDate, 'day')) {
                         day.classList.add('in-range');
+
+                        if (opts.repickTrigger === opts.field && dt.isSameOrAfter(opts.endDate)) {
+                            day.classList.add('invert');
+                        }
                     }
-                    else if (dt.isValid() && dt.isSameOrAfter(hoverDate, 'day') && dt.isSameOrBefore(opts.startDate, 'day')) {
-                        day.classList.add('in-range', 'invert');
+                    else if (dt.isValid() && dt.isSameOrAfter(hoverDate, 'day') && dt.isSameOrBefore(startDate, 'day')) {
+                        day.classList.add('in-range');
+
+                        if (opts.repickTrigger !== opts.field) {
+                            day.classList.add('invert');
+                        }
                     }
@@ -443,7 +471,12 @@ else {
 
-                    day.classList.remove('end-date');
+                    if (opts.startDate && opts.endDate && opts.repick && opts.repickTrigger === opts.field) {
+                        day.classList.remove('start-date');
+                    }
+                    else {
+                        day.classList.remove('end-date');
+                    }
                 });
 
                 if (opts.hoveringTooltip) {
-                    days = Math.abs(hoverDate.isAfter(opts.startDate) ? hoverDate.diff(opts.startDate, 'day') : opts.startDate.diff(hoverDate, 'day')) + 1;
+                    days = Math.abs(hoverDate.isAfter(startDate) ? hoverDate.diff(startDate, 'day') : startDate.diff(hoverDate, 'day')) + 1;
 
@@ -476,3 +509,8 @@ var tooltip = self.el.querySelector('.lightpick-tooltip');
 
-                target.classList.add('end-date');
+                if (opts.startDate && opts.endDate && opts.repick && opts.repickTrigger === opts.field) {
+                    target.classList.add('start-date');
+                }
+                else {
+                    target.classList.add('end-date');
+                }
             }
@@ -604,8 +642,27 @@ };
             }
-                
+
+            if (window.innerWidth < 480 && opts.numberOfMonths > 1) {
+                opts.numberOfMonths = 1;
+            }
+
+            if (opts.repick && !opts.secondField) {
+                opts.repick = false;
+            }
+
             this._opts = Object.assign({}, opts);
 
+            if ((opts.startDate || opts.endDate) && typeof opts.onSelect === 'function') {
+                this.setStartDate(opts.startDate, true);
+                this.setEndDate(opts.endDate, true);
+                opts.onSelect.call(this, this.getStartDate(), this.getEndDate());
+            }
+
             return opts;
         },
 
+        swapDate: function(){
+            var tmp = moment(this._opts.startDate);
+            this.setDateRange(this._opts.endDate, tmp);
+        },
+
         gotoToday: function()
@@ -720,3 +777,3 @@ {
 
-        setDateRange: function(start, end){
+        setDateRange: function(start, end, preventOnSelect){
             if (this._opts.singleDate) {
@@ -727,2 +784,6 @@ return;
             this.setEndDate(end, true);
+
+            if (!preventOnSelect && typeof this._opts.onSelect === 'function') {
+                this._opts.onSelect.call(this, this.getStartDate(), this.getEndDate());
+            }
         },
@@ -757,2 +818,6 @@
 
+                if (this._opts.repick) {
+                    this._opts.repickTrigger = target;
+                }
+
                 if (this._opts.secondField && this._opts.secondField === target && this._opts.endDate) {
@@ -759,0 +824,0 @@ this.gotoDate(this._opts.endDate);

package.json

 {
   "name": "lightpick",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Javascript date range picker - lightweight, no jQuery",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -119,2 +119,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)
 
+### repick
+- Type: `Boolean`
+- Default: `false`
+
+Repick start/end instead of new range. This option working only when exists `secondField`.
+
 ### minDate
@@ -121,0 +127,0 @@ - Type: `moment|String|Number|Date`

No alert changes

Improved metrics

Total package byte prevSize

73582

increased by6.6%

Lines of code

1023

increased by7.12%

Number of lines in readme file

236

increased by2.61%

No dependency changes