lightpick - npm Package Compare versions

Comparing version 1.2.11 to 1.3.1

CHANGELOG.md

 # Changelog
 All notable changes to this project will be documented in this file.
 
+[1.3.1] - 2019-03-22
+* New option: `inline` (default is `false`)
+
+[1.3.0] - 2019-03-22
+* Dropdown list months, years
+
 [1.2.11] - 2019-02-13
@@ -5,0 +11,0 @@ * Improve sync values with fields

docs/demo.js

@@ -191,2 +191,11 @@ var rangeText = function (start, end) {
     }
+});
+
+// demo-13
+new Lightpick({
+    field: document.getElementById('demo-13'),
+    inline: true,
+    onSelect: function(date){
+        document.getElementById('result-13').innerHTML = date.format('Do MMMM YYYY');
+    }
 });

lightpick.js

@@ -60,2 +60,7 @@ /**
         disableWeekends: false,
+        inline: false,
+        years: {
+            min: 1900,
+            max: null,
+        },
         locale: {
@@ -82,12 +87,12 @@ buttons: {
             }
-        }
+        },
     },
 
-    renderTopButtons = function(opts, viewMode)
+    renderTopButtons = function(opts)
     {
         return '<div class="lightpick__toolbar">'
             + ''
-            + '<button type="button" class="lightpick__previous-action" data-view-mode="' + viewMode + '">' + opts.locale.buttons.prev + '</button>'
-            + '<button type="button" class="lightpick__next-action" data-view-mode="' + viewMode + '">' + opts.locale.buttons.next + '</button>'
-            + (!opts.autoclose ? '<button type="button" class="lightpick__close-action">' + opts.locale.buttons.close + '</button>'  : '')
+            + '<button type="button" class="lightpick__previous-action">' + opts.locale.buttons.prev + '</button>'
+            + '<button type="button" class="lightpick__next-action">' + opts.locale.buttons.next + '</button>'
+            + (!opts.autoclose && !opts.inline ? '<button type="button" class="lightpick__close-action">' + opts.locale.buttons.close + '</button>'  : '')
             + '</div>';
@@ -256,2 +261,63 @@ },
 
+    renderMonthsList = function(date, opts) 
+    {
+        var d = moment(date),
+            select = document.createElement('select');
+
+        for (var idx = 0; idx < 12; idx++) {
+            d.set('month', idx);
+
+            var option = document.createElement('option');
+            option.value = d.toDate().getMonth();
+            option.text = d.toDate().toLocaleString(opts.lang, { month: 'long' });
+
+            if (idx === date.toDate().getMonth()) {
+                option.setAttribute('selected', 'selected');
+            }
+
+            select.appendChild(option);
+        }
+
+        select.className = 'lightpick__select lightpick__select-months';
+        
+        // for text align to right
+        select.dir = 'rtl';
+    
+        return select.outerHTML;
+    },
+
+    renderYearsList = function(date, opts)
+    {
+        var d = moment(date),
+            select = document.createElement('select'),
+            minYear = opts.years.min ? opts.years.min : 1900,
+            maxYear = opts.years.max ? opts.years.max : Number.parseInt(moment().format('YYYY'));
+
+        if (Number.parseInt(date.format('YYYY')) < minYear) {
+            minYear = Number.parseInt(date.format('YYYY'));
+        }
+
+        if (Number.parseInt(date.format('YYYY')) > maxYear) {
+            maxYear = Number.parseInt(date.format('YYYY'));
+        }
+
+        for (var idx = minYear; idx <= maxYear; idx++) {
+            d.set('year', idx);
+
+            var option = document.createElement('option');
+            option.value = d.toDate().getFullYear();
+            option.text = d.toDate().getFullYear();
+
+            if (idx === date.toDate().getFullYear()) {
+                option.setAttribute('selected', 'selected');
+            }
+
+            select.appendChild(option);
+        }
+
+        select.className = 'lightpick__select lightpick__select-years';
+
+        return select.outerHTML;
+    },
+
     renderCalendar = function(el, opts)
@@ -267,6 +333,6 @@ {
             html += '<header class="lightpick__month-title-bar">'
-            html += '<h1 class="lightpick__month-title" data-ym="' + day.format('YYYY-MM') + '">'
-            + '<b class="lightpick__month-title-accent">' + day.toDate().toLocaleString(opts.lang, { month: 'long' }) + '</b> '
-            + day.format('YYYY')
-            + '</h1>';
+            html += '<div class="lightpick__month-title">'
+            + renderMonthsList(day, opts)
+            + renderYearsList(day, opts)
+            + '</div>';
 
@@ -331,27 +397,2 @@ if (opts.numberOfMonths === 1) {
 
-    renderMonthsOfYear = function(el, opts, date)
-    {
-        if (date) {
-            opts.calendar[0] = moment(date);
-        }
-        var ym = moment(opts.calendar[0]);
-
-        var html = '<header class="lightpick__month-title-bar">'
-        html += '<h1 class="lightpick__month-title">' + ym.format('YYYY') +  '</h1>';
-        html += renderTopButtons(opts, 'months');
-        html += '</header>';
-
-        html += '<div class="lightpick__months-of-the-year-list">';
-
-        for (var i = 1; i <= 12; i++) {
-            html += '<div class="lightpick__month-of-the-year" data-goto-month="' + ym.format('YYYY') + '-' + i + '">'
-                 + '<div>' + moment(i, 'M').toDate().toLocaleString(opts.lang, { month: 'long' }) + '</div>'
-                 + '<div>' + ym.format('YYYY') + '</div>'
-                 + '</div>';
-        }
-        html += '</div>';
-
-        el.querySelector('.lightpick__months-of-the-year').innerHTML = html;
-    },
-
     updateDates = function(el, opts)
@@ -407,3 +448,3 @@ {
 
-        if (opts.parentEl !== 'body') {
+        if (opts.inline) {
             self.el.className += ' lightpick--inlined';
@@ -415,4 +456,3 @@ }
         + '<div class="lightpick__months"></div>'
-        + '<div class="lightpick__tooltip" style="visibility: hidden"></div>'
-        + '<div class="lightpick__months-of-the-year"></div>';
+        + '<div class="lightpick__tooltip" style="visibility: hidden"></div>';
 
@@ -439,3 +479,7 @@ if (opts.footer) {
             opts.parentEl.appendChild(self.el)
-        } else {
+        } 
+        else if (opts.parentEl === 'body' && opts.inline) {
+            opts.field.parentNode.appendChild(self.el);
+        }
+        else {
             document.querySelector(opts.parentEl).appendChild(self.el);
@@ -457,4 +501,7 @@ }
             e.stopPropagation();
-            e.preventDefault();
 
+            if (!target.classList.contains('lightpick__select')) {
+                e.preventDefault();
+            }
+
             var opts = self._opts;
@@ -525,3 +572,3 @@
                         }
-                        else if (!opts.singleDate) {
+                        else if (!opts.singleDate || opts.inline) {
                             updateDates(self.el, opts);
@@ -576,30 +623,6 @@ }
             else if (target.classList.contains('lightpick__previous-action')) {
-                if (target.hasAttribute('data-view-mode')) {
-                    var viewMode = target.getAttribute('data-view-mode');
-
-                    switch (viewMode) {
-                        case 'days':
-                            self.prevMonth();
-                        break;
-
-                        case 'months':
-                            self.prevYear();
-                        break;
-                    }
-                }
+                self.prevMonth();
             }
             else if (target.classList.contains('lightpick__next-action')) {
-                if (target.hasAttribute('data-view-mode')) {
-                    var viewMode = target.getAttribute('data-view-mode');
-
-                    switch (viewMode) {
-                        case 'days':
-                            self.nextMonth();
-                        break;
-
-                        case 'months':
-                            self.nextYear();
-                        break;
-                    }
-                }
+                self.nextMonth();
             }
@@ -612,27 +635,2 @@ else if (target.classList.contains('lightpick__close-action') || target.classList.contains('lightpick__apply-action')) {
             }
-            else if (target.classList.contains('lightpick__month-title')) {
-                if (target.hasAttribute('data-ym')) {
-                    var _toolbar = self.el.querySelector('.lightpick__inner > .lightpick__toolbar');
-                    if (_toolbar) {
-                        _toolbar.style.display = 'none';
-                    }
-
-                    self.el.querySelector('.lightpick__months').innerHTML = '';
-                    renderMonthsOfYear(self.el, opts, target.getAttribute('data-ym'));
-                }
-            }
-            else if (target.hasAttribute('data-goto-month')) {
-                var month = moment(target.getAttribute('data-goto-month'), 'YYYY-M');
-                if (month.isValid()) {
-                    self.gotoDate(month);
-
-                    self.el.querySelector('.lightpick__months-of-the-year').innerHTML = '';
-
-                    var _toolbar = self.el.querySelector('.lightpick__inner > .lightpick__toolbar');
-                    if (_toolbar) {
-                        _toolbar.style.display = 'flex';
-                    }
-                }
-            }
-
         };
@@ -749,6 +747,6 @@ self._onMouseEnter = function(e)
 
-            if (target.classList.contains('is-selected-lightpick-month')) {
+            if (target.classList.contains('lightpick__select-months')) {
                 self.gotoMonth(target.value);
             }
-            else if (target.classList.contains('is-selected-lightpick-year')) {
+            else if (target.classList.contains('lightpick__select-years')) {
                 self.gotoYear(target.value);
@@ -844,4 +842,10 @@ }
         self.el.addEventListener('touchend', self._onMouseDown, true);
+        self.el.addEventListener('change', self._onChange, true);
 
-        self.hide();
+        if (opts.inline) {
+            self.show();
+        }
+        else {
+            self.hide();
+        }
 
@@ -907,2 +911,7 @@ opts.field.addEventListener('change', self._onInputChange);
 
+            if (opts.inline) {
+                opts.autoclose = false;
+                opts.hideOnBodyClick = false;
+            }
+
             this._opts = Object.assign({}, opts);
@@ -981,2 +990,13 @@
 
+        gotoYear: function(year)
+        {
+            if (isNaN(year)) {
+                return;
+            }
+
+            this._opts.calendar[0].set('year', year);
+
+            renderCalendar(this.el, this._opts);
+        },
+
         prevMonth: function()
@@ -1000,16 +1020,2 @@ {
 
-        prevYear: function()
-        {
-            this._opts.calendar[0] = moment(this._opts.calendar[0]).subtract(1, 'year');
-
-            renderMonthsOfYear(this.el, this._opts);
-        },
-
-        nextYear: function()
-        {
-            this._opts.calendar[0] = moment(this._opts.calendar[0]).add(1, 'year');
-
-            renderMonthsOfYear(this.el, this._opts);
-        },
-
         updatePosition: function()
@@ -1226,4 +1232,2 @@ {
 
-                this.el.querySelector('.lightpick__months-of-the-year').innerHTML = '';
-
                 if (document.activeElement && document.activeElement != document.body) {
@@ -1257,6 +1261,8 @@ document.activeElement.blur();
             this.hide();
-            this.el.removeEventListener('mousedown', this._onMouseDown, true);
-            this.el.removeEventListener('touchend', this._onMouseDown, true);
-            this.el.removeEventListener('change', this._onChange, true);
 
+            this.el.removeEventListener('mousedown', self._onMouseDown, true);
+            this.el.removeEventListener('mouseenter', self._onMouseEnter, true);
+            this.el.removeEventListener('touchend', self._onMouseDown, true);
+            this.el.removeEventListener('change', self._onChange, true);
+
             opts.field.removeEventListener('change', this._onInputChange);
@@ -1263,0 +1269,0 @@ opts.field.removeEventListener('click', this._onInputClick);

package.json

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

README.md

@@ -212,2 +212,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)
 
+### inline
+- Type: `Boolean`
+- Default: `false`
+
+Show calendar inline. If `true` and `parentEl` is not provided then will use `parentNode` of field.
+
 ### locale
@@ -214,0 +220,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

118497

increased by2.35%

Number of package files

11

increased by10%

Number of lines in readme file

328

increased by1.86%

Worsened metrics

Lines of code

1862

decreased by-0.9%

No dependency changes