lightpick - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # Changelog
 All notable changes to this project will be documented in this file.
 
+[0.0.4] - 2018-06-18
+* Added tooltip
+* Option `buttons` moved to `locale`
+
 [0.0.2] - 2018-06-16
-* Add polyfill (Object.assign)
+* Added polyfill (Object.assign)
 * flexbox fallback for IE
@@ -7,0 +11,0 @@ * Update docs

demo.js

@@ -95,2 +95,15 @@ function rangeText(start, end) {
     }
+});
+
+// demo-10
+new lightPick({
+    field: document.getElementById('demo-10'),
+    singleDate: false,
+    lang: 'ru',
+    locale: {
+        tooltip: ['день', 'дня', 'дней'],
+    },
+    onSelect: function(start, end){
+        document.getElementById('result-10').innerHTML = rangeText(start, end);
+    }
 });

lightpick.js

@@ -63,7 +63,2 @@ /**
         lang: 'auto',
-        buttons: {
-            prev: '<',
-            next: '>',
-            close: '×',
-        },
         format: 'DD/MM/YYYY',
@@ -87,2 +82,11 @@ separator: ' - ',
         onClose: null,
+        hoveringTooltip: true,
+        locale: {
+            buttons: {
+                prev: '<',
+                next: '>',
+                close: '×',
+            },
+            tooltip: ['day', 'days'],
+        }
     },
@@ -93,5 +97,5 @@
             + ''
-            + '<button type="button" class="prev">' + opts.buttons.prev + '</button>'
-            + '<button type="button" class="next">' + opts.buttons.next + '</button>' 
-            + (!opts.autoclose ? '<button type="button" class="close">' + opts.buttons.close + '</button>'  : '')
+            + '<button type="button" class="prev">' + opts.locale.buttons.prev + '</button>'
+            + '<button type="button" class="next">' + opts.locale.buttons.next + '</button>' 
+            + (!opts.autoclose ? '<button type="button" class="close">' + opts.locale.buttons.close + '</button>'  : '')
             + '</div>';
@@ -233,8 +237,2 @@ },
 
-        if (opts.numberOfMonths > 1) {
-            html += renderTopButtons(opts);
-        }
-
-        html += '<div class="months">';
-
         for (var i = 0; i < opts.numberOfMonths; i++) {
@@ -298,7 +296,5 @@ var day = moment(monthDate);
 
-        html += '</div>'; // months
-
         opts.calendar[1] = moment(monthDate);
 
-        el.innerHTML = html;
+        el.querySelector('.months').innerHTML = html;
     },
@@ -313,2 +309,8 @@
 
+    plural = function(value, arr) {
+        return value % 10 == 1 && value % 100 != 11 
+        ? arr[0] 
+        : (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 10 || value % 100 >= 20 ) ? arr[1] : (arr[2] || arr[1]));
+    },
+
     lightPick = function(options)
@@ -322,2 +324,9 @@ {
         self.el.className = 'lightpick-container rows-' + opts.numberOfColumns;
+
+        self.el.innerHTML = '<div class="lightpick-inner">'
+        + (opts.numberOfMonths > 1 ? renderTopButtons(opts) : '')
+        + '<div class="months"></div>'
+        + '<div class="lightpick-tooltip" style="visibility: hidden"></div>'
+        + '</div>';
+
         document.querySelector(opts.parentEl).appendChild(self.el);
@@ -402,3 +411,5 @@
 
-            if (self._opts.singleDate || (!self._opts.startDate && !self._opts.endDate)) {
+            var opts = self._opts;
+
+            if (opts.singleDate || (!opts.startDate && !opts.endDate)) {
                 return;
@@ -411,3 +422,3 @@ }
 
-            if (self._opts.startDate && !self._opts.endDate) {
+            if (opts.startDate && !opts.endDate) {
                 var hoverDate = moment(parseInt(target.getAttribute('data-time')));
@@ -418,2 +429,3 @@
                 }
+
                 var days = self.el.querySelectorAll('.day');
@@ -425,6 +437,6 @@ [].forEach.call(days, function(day) {
 
-                    if (dt.isValid() && dt.isSameOrAfter(self._opts.startDate, 'day') && dt.isSameOrBefore(hoverDate, 'day')) {
+                    if (dt.isValid() && dt.isSameOrAfter(opts.startDate, 'day') && dt.isSameOrBefore(hoverDate, 'day')) {
                         day.classList.add('in-range');
                     }
-                    else if (dt.isValid() && dt.isSameOrAfter(hoverDate, 'day') && dt.isSameOrBefore(self._opts.startDate, 'day')) {
+                    else if (dt.isValid() && dt.isSameOrAfter(hoverDate, 'day') && dt.isSameOrBefore(opts.startDate, 'day')) {
                         day.classList.add('in-range', 'invert');
@@ -439,2 +451,31 @@ }
 
+                if (opts.hoveringTooltip) {
+                    days = Math.abs(hoverDate.isAfter(opts.startDate) ? hoverDate.diff(opts.startDate, 'day') : opts.startDate.diff(hoverDate, 'day')) + 1;
+
+                    var tooltip = self.el.querySelector('.lightpick-tooltip');
+
+                    if (days > 0 && !target.classList.contains('disabled')) {
+                            var dayBounding = target.getBoundingClientRect(),
+                            pickerBouding = self.el.getBoundingClientRect(),
+                            _left = (dayBounding.left - pickerBouding.left) + (dayBounding.width / 2),
+                            _top = dayBounding.top - pickerBouding.top;
+                    
+                        tooltip.style.visibility = 'visible';
+                        tooltip.textContent = days + ' ' + plural(days, opts.locale.tooltip);
+
+                        var tooltipBounding = tooltip.getBoundingClientRect();
+                        
+                        _top -= tooltipBounding.height;
+                        _left -= (tooltipBounding.width / 2);
+
+                        setTimeout(function(){
+                            tooltip.style.top = _top + 'px';
+                            tooltip.style.left = _left + 'px';
+                        }, 10);
+                    }
+                    else {
+                        tooltip.style.visibility = 'hidden';
+                    }
+                }
+
                 target.classList.add('end-date');
@@ -559,2 +600,10 @@ }
             } 
+
+            if (opts.hoveringTooltip && opts.singleDate) {
+                opts.hoveringTooltip = false;
+            }
+
+            if (Object.prototype.toString.call(options.locale) === '[object Object]') {
+                opts.locale = Object.assign({}, defaults.locale, options.locale);
+            }
                 
@@ -737,2 +786,3 @@ this._opts = Object.assign({}, opts);
 
+                this.el.querySelector('.lightpick-tooltip').style.visibility = 'hidden';
 
@@ -739,0 +789,0 @@ if (typeof this._opts.onClose === 'function') {

package.json

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

README.md

@@ -12,11 +12,11 @@ [![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)
 
-### [Demo & Docs](https://wakirin.github.io/lightPick)
+## [Demo & Docs](https://wakirin.github.io/lightPick)
 
 ----
 
-### Dependencies
+## Dependencies
 
 * Moment.js
 
-### Installation
+## Installation
 
@@ -31,3 +31,3 @@ * * *
 
-### Usage
+## Usage
 
@@ -39,3 +39,3 @@ * * *
 ```
-<input type="text" id="lightpick"/>
+<input type="text" id="datepicker"/>
 ```
@@ -52,55 +52,143 @@
 
-### Configuration
+## Configuration
 
 * * *
 
-`field` \- bind the datepicker to a form field
+### field
+- Type: `Element`
+- Default: `null` 
 
-`secondField` \- if exists then end of date range will set here.
+Bind the datepicker to a form field
 
-`firstDay` (number) default: 1 \- ISO day of the week (1: Monday, ..., 7: Sunday).
+### secondField
+- Type: `Element`
+- Default: `null` 
 
-`parentEl` (string) default: 'body' \- selector of the parent element that the date range picker will be added to, if not provided this will be 'body'.
+If exists then end of date range will set here.
 
-`lang` (string) default: 'auto' \- language code for names of days, months by [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString). 'auto' will try detect user browser language.
+### firstDay
+- Type: `Number`
+- Default: `1`
 
-`buttons` (object) default: { prev: '<', next: '>', close: '×'} \- text for buttons.
+ISO day of the week (1: Monday, ..., 7: Sunday).
 
-`format` (string) default: 'DD/MM/YYYY' \- the default output format.
+### parentEl
+- Type: `String`
+- Default: `body` 
 
-`separator` (string) default: '-' \- separator between dates when one field.
+Selector of the parent element that the date range picker will be added to, if not provided this will be 'body'.
 
-`numberOfMonths` (number) default: 1 \- number of visible months.
+### lang
+- Type: `String`
+- Default: `auto`
 
-`numberOfColumns` (number) default: 2 \- number of columns months.
+Language code for names of days, months by [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString). 'auto' will try detect user browser language.
 
-`singleDate` (true/false) default: true \- choose a single date instead of a date range.
+### format
+- Type: `String`
+- Default: `DD/MM/YYYY`
 
-`autoclose` (true/false) default: true \- close calendar when picked date/range.
+The default output format.
 
-`minDate` (moment|string|number|date) default: null \- the minimum/earliest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()
+### separator
+- Type: `String`
+- Default: `-`
 
-`maxDate` (moment|string|number|date) default: null \- the maximum/latest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()
+Separator between dates when one field.
 
-`disableDates` (array) default: null \- array of disabled dates. Array can contains ranges, allowed the same format as in options minDate, maxDate. Ex.: \[moment().startOf('month'), \['2018-06-23', '2018-06-30'\]\]
+### numberOfMonths
+- Type: `Number`
+- Default: `1`
 
-`selectForward` (true/false) default: false \- select second date after the first selected date.
+Number of visible months.
 
-`selectBackward` (true/false) default: false \- select second date before the first selected date.
+### numberOfColumns
+- Type: `Number`
+- Default: `2`
 
-`minDays` (number) default: null \- the minimum days of the selected range.
+Number of columns months.
 
-`maxDays` (number) default: null \- the maximum days of the selected range.
+### singleDate
+- Type: `Boolean`
+- Default: `true`
 
-`onSelect` \- callback function for when a date is selected.
+Choose a single date instead of a date range.
 
-`onOpen` \- callback function for when the picker becomes visible.
+### autoclose
+- Type: `Boolean`
+- Default: `true`
 
-`onClose` \- callback function for when the picker is hidden.
+Close calendar when picked date/range.
 
-### Methods
+### minDate
+- Type: `moment|String|Number|Date`
+- Default: `null`
 
+The minimum/earliest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()
+
+### maxDate
+- Type: `moment|String|Number|Date`
+- Default: `null`
+
+The maximum/latest date that can be selected. Any format: moment() or '2018-06-01' or 1527811200000, new Date()
+
+### disableDates
+- Type: `Array`
+- Default: `null`
+
+Array of disabled dates. Array can contains ranges, allowed the same format as in options minDate, maxDate. Ex.: `\[moment().startOf('month'), \['2018-06-23', '2018-06-30'\]\]`
+
+### selectForward
+- Type: `Boolean`
+- Default: `false`
+
+Select second date after the first selected date.
+
+### selectBackward
+- Type: `Boolean`
+- Default: `false`
+
+Select second date before the first selected date.
+
+### minDays
+- Type: `Number`
+- Default: `null`
+
+The minimum days of the selected range.
+
+### maxDays
+- Type: `Number`
+- Default: `null`
+
+The maximum days of the selected range.
+
+### locale
+- Type: `Object`
+- Default: `{ buttons: { prev: '<', next: '>', close: '×'}, tooltip: ['day', 'days'] }`
+
+Text for buttons, tooltip.
+
+### onSelect
+- Type: `Function`
+- Default: `null`
+
+Callback function for when a date is selected.
+
+### onOpen
+- Type: `Function`
+- Default: `null`
+
+Callback function for when the picker becomes visible.
+
+### onClose
+- Type: `Function`
+- Default: `null`
+
+Callback function for when the picker is hidden.
+
+## Methods
+
 * * *
 
-`picker.setDate(date)`
+### picker.setDate(date)
 
@@ -111,3 +199,3 @@ Set date when singleDate is true. `date` can be moment, string, number, date.
   
-`picker.setDateRange(start, end)`
+### picker.setDateRange(start, end)
 
@@ -118,3 +206,3 @@ Set date range. <code>start, end</code> can be moment, string, number, date.
 
-`picker.setDisableDates(array)`
+### picker.setDisableDates(array)
 
@@ -125,3 +213,3 @@ array of disabled dates. Array can contains ranges, allowed moment, string, number, date.
 
-`picker.getDate()`
+### picker.getDate()
 
@@ -131,28 +219,20 @@ Return current date as moment object.
 
-`picker.getStartDate()`
+### picker.getStartDate()
 
 Return current start of date range as moment object.
 
-  
+### picker.getEndDate()
 
-`picker.getEndDate()`
-
 Return current start of date range as moment object.
 
-  
+### picker.show()
 
-`picker.show()`
-
 Make the picker visible.
 
-  
+### picker.hide()
 
-`picker.hide()`
-
 Hide the picker.
 
-  
+### picker.destroy()
 
-`picker.destroy()`
-
 Hide the picker and remove all event listeners.

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

68409

increased by15.12%

Lines of code

915

increased by8.41%

Number of lines in readme file

230

increased by53.33%

No dependency changes