react-day-picker - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/DayPicker.js

@@ -20,2 +20,4 @@ "use strict";
 
+    enableOutsideDays: React.PropTypes.bool,
+
     initialMonth: React.PropTypes.object, // default is current month
@@ -25,3 +27,3 @@ modifiers: React.PropTypes.object,
     onDayClick: React.PropTypes.func,
-    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin enabled
+    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin
     onDayMouseEnter: React.PropTypes.func,
@@ -33,3 +35,3 @@ onDayMouseLeave: React.PropTypes.func
   getDefaultProps: function () {
-    return { initialMonth: moment() };
+    return { initialMonth: moment(), enableOutsideDays: false };
   },
@@ -146,7 +148,8 @@
 
-  renderDay: function (day, otherMonth) {
+  renderDay: function (day, outside) {
     var modifiers = this.getModifiersForDay(day);
-
+    var doy = day.dayOfYear();
+    var key = "d" + doy;
     var className = "daypicker__day";
-    if (otherMonth) className += " daypicker__day--other-month";
+    if (outside) className += " daypicker__day--outside";
     className += modifiers.map(function (mod) {
@@ -156,6 +159,10 @@ return " daypicker__day--" + mod;
 
-    return React.createElement("td", {
-      ref: "d" + day.dayOfYear(),
-      key: "d" + day.dayOfYear(),
+    if (outside && !this.props.enableOutsideDays) return React.createElement("td", {
       className: className,
+      ref: key,
+      key: key
+    });else return React.createElement("td", {
+      ref: key,
+      key: key,
+      className: className,
       onMouseEnter: this.handleDayMouseEnter.bind(this, day, modifiers),
@@ -162,0 +169,0 @@ onMouseLeave: this.handleDayMouseLeave.bind(this, day, modifiers),

example/src/Page.jsx

@@ -70,2 +70,3 @@ import React from 'react';
         <DayPicker 
+          enableOutsideDays={true}
           initialMonth={ valueToDate(this.state.value) || moment() } 
@@ -72,0 +73,0 @@ modifiers={modifiers}

package.json

 {
   "name": "react-day-picker",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Minimalistic date picker component for React and momentjs.",
@@ -5,0 +5,0 @@ "main": "./dist/DayPicker.js",

README.md

@@ -83,2 +83,6 @@ # react-day-picker
 
+#### enableOutsideDay `bool`
+
+Show the days outside the shown month.
+
 #### modifiers `Object`
@@ -108,3 +112,3 @@
 
-> To make the touch tap events working, you **must** inject [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) client side. It works better then the click event on mobile.
+> To make the touch tap events working, you **must** inject [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) client side.
 
@@ -111,0 +115,0 @@ #### onDayMouseEnter `function(day, modifiers, event)`

src/DayPicker.js

@@ -8,2 +8,4 @@ import React from 'react';
   propTypes: {
+
+    enableOutsideDays: React.PropTypes.bool,
     
@@ -14,3 +16,3 @@ initialMonth: React.PropTypes.object, // default is current month
     onDayClick: React.PropTypes.func,
-    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin enabled
+    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin 
     onDayMouseEnter: React.PropTypes.func, 
@@ -22,3 +24,3 @@ onDayMouseLeave: React.PropTypes.func
   getDefaultProps() {
-    return { initialMonth: moment() };
+    return { initialMonth: moment(), enableOutsideDays: false };
   },
@@ -90,5 +92,8 @@
     const className = `daypicker__nav daypicker__nav--${position}`;
-    const handler = position === 'left' ?  this.handlePrevTouchTap :  this.handleNextTouchTap;
+    const handler = position === 'left' 
+      ?  this.handlePrevTouchTap 
+      :  this.handleNextTouchTap;
 
-    return <span ref={"btn-"+position} className={className} style={{float: position}} onTouchTap={handler} />;
+    return <span ref={"btn-"+position} className={className} 
+      style={{float: position}} onTouchTap={handler} />;
   },
@@ -139,19 +144,25 @@
 
-  renderDay(day, otherMonth) {
+  renderDay(day, outside) {
     const modifiers = this.getModifiersForDay(day);
-    
+    const doy = day.dayOfYear();
+    const key = `d${doy}`;
     var className = 'daypicker__day';
-    if (otherMonth) className += ' daypicker__day--other-month';
-    className += modifiers.map((mod) => { return ' daypicker__day--' + mod }).join('');
+    if (outside) className += ' daypicker__day--outside';
+    className += modifiers.map((mod) => { 
+      return ' daypicker__day--' + mod 
+    }).join('');
 
-    return (
-      <td ref={"d" + day.dayOfYear()} key={"d" + day.dayOfYear()} 
-        className={className} 
-        onMouseEnter={this.handleDayMouseEnter.bind(this, day, modifiers)}
-        onMouseLeave={this.handleDayMouseLeave.bind(this, day, modifiers)}
-        onTouchTap={this.handleDayTouchTap.bind(this, day, modifiers)}
-        onClick={this.handleDayClick.bind(this, day, modifiers)}>
-        { day.format('D') }
-      </td>
-    );
+    if (outside && !this.props.enableOutsideDays)
+      return <td className={className} ref={key} key={key} />;
+    else 
+      return (
+        <td ref={key} key={key} 
+          className={className} 
+          onMouseEnter={this.handleDayMouseEnter.bind(this, day, modifiers)}
+          onMouseLeave={this.handleDayMouseLeave.bind(this, day, modifiers)}
+          onTouchTap={this.handleDayTouchTap.bind(this, day, modifiers)}
+          onClick={this.handleDayClick.bind(this, day, modifiers)}>
+          { day.format('D') }
+        </td>
+      );
   }
@@ -158,0 +169,0 @@

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

2282366

increased by0.03%

Lines of code

27523

increased by0.07%

Number of lines in readme file

120

increased by3.45%

No dependency changes