Allow for date range selection

This patch is a fork of Hacker0x01#79 with the suggested modifications and
merge conflicts resolved. The credit should go to the original
author. This is simply something I wanted and the original author
appears to have gone MIA.

Author: xzyfer

src/calendar.jsx

@@ -99,7 +99,8 @@ var Calendar = React.createClass( {
     var minDate = new DateUtil( this.props.minDate ).safeClone(),
         maxDate = new DateUtil( this.props.maxDate ).safeClone(),
         excludeDates,
-        disabled;
+        disabled,
+        inRange = day.inRange( this.props.startDate, this.props.endDate );
 
     if ( this.props.excludeDates && Array.isArray( this.props.excludeDates ) ) {
       excludeDates = map( this.props.excludeDates, function( date ) {
@@ -117,6 +118,7 @@ var Calendar = React.createClass( {
         date={this.state.date}
         onClick={this.handleDayClick.bind( this, day )}
         selected={new DateUtil( this.props.selected )}
+        inRange={inRange}
         disabled={disabled} />
     );
   },

src/datepicker.jsx

@@ -139,6 +139,8 @@ var DatePicker = React.createClass( {
             hideCalendar={this.hideCalendar}
             minDate={this.props.minDate}
             maxDate={this.props.maxDate}
+            startDate={this.props.startDate}
+            endDate={this.props.endDate}
             excludeDates={this.props.excludeDates}
             weekStart={this.props.weekStart} />
         </Popover>

src/day.jsx

@@ -22,12 +22,14 @@ var Day = React.createClass( {
     if ( this.props.day.sameDay( this.props.selected ) )
       classes.push( "datepicker__day--selected" );
 
+    if ( this.props.day.inRange )
+      classes.push( "datepicker__day--in-range" );
+
     if ( this.props.day.sameDay( moment() ) )
       classes.push( "datepicker__day--today" );
 
-    if ( this.isWeekend() ) {
+    if ( this.isWeekend() )
       classes.push( "datepicker__day--weekend" );
-    }
 
     return (
       <div className={classes.join( " " )} onClick={this.handleClick}>

src/stylesheets/datepicker.scss

@@ -105,7 +105,8 @@
     font-weight: bold;
   }
 
-  &--selected {
+  &--selected,
+  &--in-range {
     border-radius: $border-radius;
     background-color: $selected-color;
     color: #fff;

src/util/date.js

@@ -18,6 +18,12 @@ DateUtil.prototype.sameMonth = function( other ) {
   return this._date.isSame( other._date, "month" );
 };
 
+DateUtil.prototype.inRange = function( startDate, endDate ) {
+  var startDate = startDate._date.startOf( "day" ).subtract( 1, "seconds" );
+  var endDate = endDate._date.startOf( "day" ).add( 1, "seconds" );
+  return this._date.isBetween( startDate, endDate );
+};
+
 DateUtil.prototype.day = function() {
   return this._date.date();
 };

test/util/date_test.js

@@ -94,6 +94,40 @@ describe( "DateUtil", function() {
     } );
   } );
 
+  describe( "#inRange", function() {
+    it( "returns true when the date is in range the passed date", function() {
+      var date = new DateUtil( moment( "2014-02-09" ) );
+      var start_date = new DateUtil( moment( "2014-02-08" ) );
+      var end_date = new DateUtil( moment( "2014-02-10" ) );
+
+      expect( date.inRange( start_date, end_date ) ).to.eq( true );
+    } );
+
+    it( "returns false when the date is not in range the passed date", function() {
+      var date = new DateUtil( moment( "2014-02-08" ) );
+      var start_date = new DateUtil( moment( "2014-02-09" ) );
+      var end_date = new DateUtil( moment( "2014-02-10" ) );
+
+      expect( date.inRange( start_date, end_date ) ).to.eq( false );
+    } );
+
+    it( "returns true when the passed date is the same day as start of range", function() {
+      var date = new DateUtil( moment( "2014-02-09" ) );
+      var start_date = new DateUtil( moment( "2014-02-09" ) );
+      var end_date = new DateUtil( moment( "2014-02-10" ) );
+
+      expect( date.inRange( start_date, end_date ) ).to.eq( true );
+    } );
+
+    it( "returns true when the passed date is the same day as end of range", function() {
+      var date = new DateUtil( moment( "2014-02-10" ) );
+      var start_date = new DateUtil( moment( "2014-02-09" ) );
+      var end_date = new DateUtil( moment( "2014-02-10" ) );
+
+      expect( date.inRange( start_date, end_date ) ).to.eq( true );
+    } );
+  } );
+
   describe( "#day", function() {
     it( "returns the day of the month", function() {
       var date = new DateUtil( moment( "2014-02-08" ) );