react-bootstrap-daterangepicker - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

gulpfile.js

@@ -33,3 +33,5 @@ var gulp = require('gulp');
 			'./.jshint',
-			'./lib/*.js ./demo/src/*.js'
+			'./lib/*.js ./demo/src/*.js',
+			'--exclude',
+			'./lib/daterangepicker.js'
 		].join(' '),
@@ -36,0 +38,0 @@ function (err, stdout, stderr) {

lib/daterangepicker.js

 /**
-* @version: 1.3.15
+* @version: 1.3.17
 * @author: Dan Grossman http://www.dangrossman.info/
-* @date: 2014-10-20
+* @date: 2014-11-25
 * @copyright: Copyright (c) 2012-2014 Dan Grossman. All rights reserved.
-* @license: Licensed under Apache License v2.0. See http://www.apache.org/licenses/LICENSE-2.0
+* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
 * @website: http://www.improvely.com/
@@ -49,4 +49,4 @@ */
         var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +
-                '<div class="calendar start left"></div>' +
-                '<div class="calendar end right"></div>' +
+                '<div class="calendar first left"></div>' +
+                '<div class="calendar second right"></div>' +
                 '<div class="ranges">' +
@@ -101,3 +101,3 @@ '<div class="range_inputs">' +
             .on('change.daterangepicker', 'select.monthselect', $.proxy(this.updateMonthYear, this))
-            .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.ampmselect', $.proxy(this.updateTime, this));
+            .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.updateTime, this));
 
@@ -134,2 +134,3 @@ this.container.find('.ranges')
             this.endDate = moment().endOf('day');
+            this.timeZone = moment().zone();
             this.minDate = false;
@@ -142,2 +143,3 @@ this.maxDate = false;
             this.timePicker = false;
+            this.timePickerSeconds = false;
             this.timePickerIncrement = 30;
@@ -283,2 +285,6 @@ this.timePicker12Hour = true;
 
+            if (typeof options.timePickerSeconds === 'boolean') {
+                this.timePickerSeconds = options.timePickerSeconds;
+            }
+
             if (typeof options.timePickerIncrement === 'number') {
@@ -306,7 +312,7 @@ this.timePickerIncrement = options.timePickerIncrement;
                 if ($(this.element).is('input[type=text]')) {
-                    var val = $(this.element).val(), 
+                    var val = $(this.element).val(),
                         split = val.split(this.separator);
-                    
+
                     start = end = null;
-                    
+
                     if (split.length == 2) {
@@ -326,2 +332,11 @@ start = moment(split[0], this.format);
 
+            // bind the time zone used to build the calendar to either the timeZone passed in through the options or the zone of the startDate (which will be the local time zone by default)
+            if (typeof options.timeZone === 'string' || typeof options.timeZone === 'number') {
+                this.timeZone = options.timeZone;
+                this.startDate.zone(this.timeZone);
+                this.endDate.zone(this.timeZone);
+            } else {
+                this.timeZone = moment(this.startDate).zone();
+            }
+
             if (typeof options.ranges === 'object') {
@@ -401,3 +416,3 @@ for (range in options.ranges) {
             this.leftCalendar = {
-                month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute()]),
+                month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute(), this.startDate.second()]),
                 calendar: []
@@ -407,23 +422,22 @@ };
             this.rightCalendar = {
-                month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute()]),
+                month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute(), this.endDate.second()]),
                 calendar: []
             };
 
-            // XXX: This was edited to work in react. No longer blindly swapping on each .setOptions() call
             if (this.opens == 'right' || this.opens == 'center') {
                 //swap calendar positions
-                var left = this.container.find('.calendar.start');
-                var right = this.container.find('.calendar.end');
+                var first = this.container.find('.calendar.first');
+                var second = this.container.find('.calendar.second');
 
-                if (right.hasClass('single')) {
-                    right.removeClass('single');
-                    left.addClass('single');
+                if (second.hasClass('single')) {
+                    second.removeClass('single');
+                    first.addClass('single');
                 }
 
-                left.removeClass('left').addClass('right');
-                right.removeClass('right').addClass('left');
+                first.removeClass('left').addClass('right');
+                second.removeClass('right').addClass('left');
 
                 if (this.singleDatePicker) {
-                    left.show();
-                    right.hide();
+                    first.show();
+                    second.hide();
                 }
@@ -445,3 +459,3 @@ }
             if (typeof startDate === 'string')
-                this.startDate = moment(startDate, this.format);
+                this.startDate = moment(startDate, this.format).zone(this.timeZone);
 
@@ -463,3 +477,3 @@ if (typeof startDate === 'object')
             if (typeof endDate === 'string')
-                this.endDate = moment(endDate, this.format);
+                this.endDate = moment(endDate, this.format).zone(this.timeZone);
 
@@ -505,8 +519,8 @@ if (typeof endDate === 'object')
             if(dateString.length === 2) {
-                start = moment(dateString[0], this.format);
-                end = moment(dateString[1], this.format);
+                start = moment(dateString[0], this.format).zone(this.timeZone);
+                end = moment(dateString[1], this.format).zone(this.timeZone);
             }
 
             if (this.singleDatePicker || start === null || end === null) {
-                start = moment(this.element.val(), this.format);
+                start = moment(this.element.val(), this.format).zone(this.timeZone);
                 end = start;
@@ -605,2 +619,4 @@ }
               .on('mousedown.daterangepicker', this._outsideClickProxy)
+              // also support mobile devices
+              .on('touchend.daterangepicker', this._outsideClickProxy)
               // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them
@@ -620,2 +636,4 @@ .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy)
             if (
+                // ie modal dialog fix
+                e.type == "focusin" ||
                 target.closest(this.element).length ||
@@ -632,5 +650,3 @@ target.closest(this.container).length ||
             $(document)
-              .off('mousedown.daterangepicker')
-              .off('click.daterangepicker', '[data-toggle=dropdown]')
-              .off('focusin.daterangepicker');
+              .off('.daterangepicker');
 
@@ -861,3 +877,8 @@ this.element.removeClass('active');
             var minute = parseInt(cal.find('.minuteselect').val(), 10);
+            var second = 0;
 
+            if (this.timePickerSeconds) {
+                second = parseInt(cal.find('.secondselect').val(), 10);
+            }
+
             if (this.timePicker12Hour) {
@@ -875,4 +896,5 @@ var ampm = cal.find('.ampmselect').val();
                 start.minute(minute);
+                start.second(second);
                 this.startDate = start;
-                this.leftCalendar.month.hour(hour).minute(minute);
+                this.leftCalendar.month.hour(hour).minute(minute).second(second);
                 if (this.singleDatePicker)
@@ -884,6 +906,7 @@ this.endDate = start.clone();
                 end.minute(minute);
+                end.second(second);
                 this.endDate = end;
                 if (this.singleDatePicker)
                     this.startDate = end.clone();
-                this.rightCalendar.month.hour(hour).minute(minute);
+                this.rightCalendar.month.hour(hour).minute(minute).second(second);
             }
@@ -896,7 +919,7 @@
         updateCalendars: function () {
-            this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.month(), this.leftCalendar.month.year(), this.leftCalendar.month.hour(), this.leftCalendar.month.minute(), 'left');
-            this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.month(), this.rightCalendar.month.year(), this.rightCalendar.month.hour(), this.rightCalendar.month.minute(), 'right');
+            this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.month(), this.leftCalendar.month.year(), this.leftCalendar.month.hour(), this.leftCalendar.month.minute(), this.leftCalendar.month.second(), 'left');
+            this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.month(), this.rightCalendar.month.year(), this.rightCalendar.month.hour(), this.rightCalendar.month.minute(), this.rightCalendar.month.second(), 'right');
             this.container.find('.calendar.left').empty().html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate, 'left'));
             this.container.find('.calendar.right').empty().html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.singleDatePicker ? this.minDate : this.startDate, this.maxDate, 'right'));
-            
+
             this.container.find('.ranges li').removeClass('active');
@@ -928,3 +951,3 @@ var customRange = true;
 
-        buildCalendar: function (month, year, hour, minute, side) {
+        buildCalendar: function (month, year, hour, minute, second, side) {
             var daysInMonth = moment([year, month]).daysInMonth();
@@ -959,3 +982,4 @@ var firstDay = moment([year, month, 1]);
 
-            var curDate = moment([lastYear, lastMonth, startDay, 12, minute]);
+            var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]).zone(this.timeZone);
+
             var col, row;
@@ -1027,3 +1051,3 @@ for (i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) {
             if (!minDate || minDate.isBefore(calendar.firstDay)) {
-                html += '<th class="prev available"><i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i></th>';
+                html += '<th class="prev available"><i class="fa fa-arrow-left icon icon-arrow-left glyphicon glyphicon-arrow-left"></i></th>';
             } else {
@@ -1041,3 +1065,3 @@ html += '<th></th>';
             if (!maxDate || maxDate.isAfter(calendar.lastDay)) {
-                html += '<th class="next available"><i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i></th>';
+                html += '<th class="next available"><i class="fa fa-arrow-right icon icon-arrow-right glyphicon glyphicon-arrow-right"></i></th>';
             } else {
@@ -1185,2 +1209,19 @@ html += '<th></th>';
 
+                if (this.timePickerSeconds) {
+                    html += ': <select class="secondselect">';
+
+                    for (i = 0; i < 60; i += this.timePickerIncrement) {
+                        var num = i;
+                        if (num < 10)
+                            num = '0' + num;
+                        if (i == selected.second()) {
+                            html += '<option value="' + i + '" selected="selected">' + num + '</option>';
+                        } else {
+                            html += '<option value="' + i + '">' + num + '</option>';
+                        }
+                    }
+
+                    html += '</select>';
+                }
+
                 if (this.timePicker12Hour) {
@@ -1187,0 +1228,0 @@ html += '<select class="ampmselect">';

lib/index.js

@@ -10,3 +10,2 @@ 'use strict';
 var $ = require('jquery');
-var div = React.DOM.div;
 var DateRangePicker = require('./daterangepicker.js');
@@ -18,4 +17,4 @@
 	options: [
-		'startDate', 'endDate', 'minDate', 'maxDate', 'dateLimit', 'showDropdowns', 'showWeekNumbers',
-		'timePicker', 'timePickerIncrement', 'timePicker12Hour', 'ranges', 'opens', 'buttonClasses',
+		'startDate', 'endDate', 'minDate', 'maxDate', 'dateLimit', 'timeZone', 'showDropdowns', 'showWeekNumbers',
+		'timePicker', 'timePickerIncrement', 'timePicker12Hour', 'timePickerSeconds', 'ranges', 'opens', 'buttonClasses',
 		'applyClass', 'cancelClass', 'format', 'separator', 'locale', 'singleDatePicker', 'parentEl'
@@ -57,3 +56,3 @@ ],
 		// attach event listeners
-		['Show', 'Hide', 'Apply', 'Cancel'].forEach(function (event) {
+		['Show', 'Hide', 'ShowCalendar', 'HideCalendar', 'Apply', 'Cancel'].forEach(function (event) {
 			var lcase = event.toLowerCase();
@@ -68,6 +67,8 @@ $this.$picker.on(lcase + '.daterangepicker', $this.makeEventHandler('on' + event));
 		this.setOptionsFromProps();
-		return this.transferPropsTo(
-			div({ref: 'picker'}, this.props.children)
+		return React.createElement(
+			'div',
+			React.__spread({ref: 'picker'},  this.props),
+			this.props.children
 		);
 	}
 });

package.json

 {
   "name": "react-bootstrap-daterangepicker",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A date/time picker for react (using bootstrap). This is a react port of: https://github.com/dangrossman/bootstrap-daterangepicker",
@@ -19,8 +19,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "jquery": ">=2.1.1",
-    "moment": ">=2.8.3",
-    "react": ">=0.11.0"
+    "jquery": "2.1.3",
+    "moment": "2.8.4",
+    "react": "0.12.2"
   },
   "devDependencies": {
-    "bootstrap": "^3.3.0",
+    "bootstrap": "^3.3.1",
     "gulp": "^3.8.10",
@@ -31,10 +31,10 @@ "gulp-browserify": "^0.5.0",
     "gulp-download": "0.0.1",
-    "gulp-less": "^1.3.6",
+    "gulp-less": "^2.0.1",
     "gulp-nodemon": "^1.0.4",
     "gulp-react": "^2.0.0",
     "gulp-rename": "^1.2.0",
-    "gulp-uglify": "^1.0.1",
-    "jsxhint": "^0.5.0",
-    "react-bootstrap": "^0.12.0",
-    "reactify": "^0.15.2"
+    "gulp-uglify": "^1.0.2",
+    "jsxhint": "^0.9.0",
+    "react-bootstrap": "^0.13.0",
+    "reactify": "^0.17.1"
   },
@@ -41,0 +41,0 @@ "keywords": [

README.md

@@ -35,3 +35,3 @@ # react-bootstrap-daterangepicker
 
-3) Include the daterangepicker CSS in your project somewhere. The CSS file is here: [daterangepicker-bs3.css](https://raw.githubusercontent.com/skratchdot/react-bootstrap-daterangepicker/gh-pages/css/daterangepicker-bs3.css) (don't hotlink- download and host your own copy)
+3) Include the daterangepicker CSS in your project somewhere. The CSS file is here: [daterangepicker-bs3.css](https://raw.githubusercontent.com/skratchdot/react-bootstrap-daterangepicker/master/css/daterangepicker-bs3.css) (don't hotlink- download and host your own copy)
 
@@ -49,10 +49,12 @@ ```html
 
-- **startDate, endDate, minDate, maxDate, dateLimit, showDropdowns, showWeekNumbers,
-  timePicker, timePickerIncrement, timePicker12Hour, ranges, opens, buttonClasses,
+- **startDate, endDate, minDate, maxDate, dateLimit, timeZone, showDropdowns, showWeekNumbers,
+  timePicker, timePickerIncrement, timePicker12Hour, timePickerSeconds, ranges, opens, buttonClasses,
   applyClass, cancelClass, format, separator, locale, singleDatePicker, parentEl**
 
-You can listen to the following 5 events:
+You can listen to the following 7 events:
 
 - **onShow**: thrown when the widget is shown
 - **onHide**: thrown when the widget is hidden
+- **onShowCalendar**: thrown when the calendar is shown
+- **onHideCalendar**: thrown when the calendar is hidden
 - **onApply**: thrown when the apply button is clicked
@@ -62,3 +64,3 @@ - **onCancel**: thrown when the cancel button is clicked
 
-All 5 of the events above should take a handler that is passed 2 arguments: **event** and **picker**
+All 7 of the events above should take a handler that is passed 2 arguments: **event** and **picker**
 
@@ -65,0 +67,0 @@ #### Example event handler:

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

68509

increased by3.37%

Lines of code

1450

increased by2.62%

Number of lines in readme file

91

increased by2.25%

Dependency changes

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjquery@2.1.3(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedmoment@2.8.4(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.12.2(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsource-map@0.4.40.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedwrappy@1.0.2(transitive)

• - Removedjquery@3.7.1(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmoment@2.30.1(transitive)

• - Removedreact@18.3.1(transitive)

• Updatedjquery@2.1.3

• Updatedmoment@2.8.4

• Updatedreact@0.12.2