Show days in range

Author: lbekkema

bower.json

@@ -25,7 +25,8 @@
     "react": "< 0.13",
     "moment": "2.8.2",
     "tether": "0.6.5",
-    "react-onclickoutside": "0.2.1"
+    "react-onclickoutside": "0.2.1",
+    "moment-range": "~1.0.6"
   },
   "ignore": [
     "**/.*",

example.html

@@ -3,6 +3,7 @@
     <script src="https://cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/react/0.12.2/react-with-addons.js"></script>
     <script src="https://cdn.jsdelivr.net/tether/0.6.5/tether.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/1.0.5/moment-range.min.js"></script>
     <script type="text/javascript" src="react-datepicker.js"></script>
     <link rel="stylesheet" type="text/css" href="react-datepicker.css">
   </head>
@@ -33,7 +34,7 @@ <h1>ReactJS DatePicker Example</h1>
 
         getInitialState: function() {
           return {
-            start_date: moment(),
+            start_date: moment().subtract(10, 'days'),
             end_date: moment(),
             new_date: null,
             bound_date: null
@@ -71,25 +72,43 @@ <h1>ReactJS DatePicker Example</h1>
               selected: this.state.start_date,
               onChange: this.handleStartDateChange
             }),
+
             DatePickerFactory({
               key: 'example2',
               selected: this.state.end_date,
               dateFormat: "YYYY/MM/DD",
               onChange: this.handleEndDateChange
             }),
+
             DatePickerFactory({
               key: 'example3',
               selected: this.state.new_date,
               onChange: this.handleNewDateChange,
               placeholderText: 'Click to select a date'
             }),
+
             DatePickerFactory({
               key: 'example4',
               selected: this.state.bound_date,
               onChange: this.handleBoundDateChange,
               minDate: moment(),
               maxDate: moment().add(5, 'days'),
               placeholderText: 'Select a date between today and 5 days in the future'
+            }),
+
+            DatePickerFactory({
+              key: 'example5',
+              selected: this.state.start_date,
+              onChange: this.handleStartDateChange,
+              startDate: this.state.start_date,
+              endDate: this.state.end_date
+            }),
+            DatePickerFactory({
+              key: 'example6',
+              selected: this.state.end_date,
+              onChange: this.handleEndDateChange,
+              startDate: this.state.start_date,
+              endDate: this.state.end_date
             })
           ]);
         }

react-datepicker.css

@@ -113,12 +113,12 @@
 .datepicker__day--today {
   font-weight: bold;
 }
-.datepicker__day--selected {
+.datepicker__day--selected, .datepicker__day--in-range {
   border-radius: 4px;
   background-color: #216ba5;
   color: #fff;
 }
-.datepicker__day--selected:hover {
+.datepicker__day--selected:hover, .datepicker__day--in-range:hover {
   background-color: #1d5d90;
 }
 .datepicker__day--disabled {

react-datepicker.js

@@ -140,17 +140,25 @@ var Calendar = React.createClass({displayName: "Calendar",
   },
 
   renderDay: function(day, key) {
+    // Initiatie variables for disabling days
     var minDate = new DateUtil(this.props.minDate).safeClone(),
         maxDate = new DateUtil(this.props.maxDate).safeClone(),
         disabled = day.isBefore(minDate) || day.isAfter(maxDate);
 
+    // Initiatie variables for displaying days in range
+    var startDate = moment(this.props.startDate).startOf('day').subtract(1, 'seconds'),
+        endDate = moment(this.props.endDate.startOf('day')).add(1, 'seconds'),
+        range = moment().range(startDate, endDate),
+        inRange = range.contains(day.moment());
+
     return (
       React.createElement(Day, {
         key: key, 
         day: day, 
         date: this.state.date, 
         onClick: this.handleDayClick.bind(this, day), 
         selected: new DateUtil(this.props.selected), 
+        inRange: inRange, 
         disabled: disabled})
     );
   },
@@ -343,7 +351,9 @@ var DatePicker = React.createClass({displayName: "DatePicker",
             onSelect: this.handleSelect, 
             hideCalendar: this.hideCalendar, 
             minDate: this.props.minDate, 
-            maxDate: this.props.maxDate})
+            maxDate: this.props.maxDate, 
+            startDate: this.props.startDate, 
+            endDate: this.props.endDate})
         )
       );
     }
@@ -386,6 +396,7 @@ var Day = React.createClass({displayName: "Day",
     classes = React.addons.classSet({
       'datepicker__day': true,
       'datepicker__day--disabled': this.props.disabled,
+      'datepicker__day--in-range': this.props.inRange,
       'datepicker__day--selected': this.props.day.sameDay(this.props.selected),
       'datepicker__day--this-month': this.props.day.sameMonth(this.props.date),
       'datepicker__day--today': this.props.day.sameDay(moment())

src/calendar.js

@@ -58,17 +58,25 @@ var Calendar = React.createClass({
   },
 
   renderDay: function(day, key) {
+    // Initiatie variables for disabling days
     var minDate = new DateUtil(this.props.minDate).safeClone(),
         maxDate = new DateUtil(this.props.maxDate).safeClone(),
         disabled = day.isBefore(minDate) || day.isAfter(maxDate);
 
+    // Initiatie variables for displaying days in range
+    var startDate = moment(this.props.startDate).startOf('day').subtract(1, 'seconds'),
+        endDate = moment(this.props.endDate.startOf('day')).add(1, 'seconds'),
+        range = moment().range(startDate, endDate),
+        inRange = range.contains(day.moment());
+
     return (
       <Day
         key={key}
         day={day}
         date={this.state.date}
         onClick={this.handleDayClick.bind(this, day)}
         selected={new DateUtil(this.props.selected)}
+        inRange={inRange}
         disabled={disabled} />
     );
   },

src/datepicker.js

@@ -53,7 +53,9 @@ var DatePicker = React.createClass({
             onSelect={this.handleSelect}
             hideCalendar={this.hideCalendar}
             minDate={this.props.minDate}
-            maxDate={this.props.maxDate} />
+            maxDate={this.props.maxDate}
+            startDate={this.props.startDate}
+            endDate={this.props.endDate} />
         </Popover>
       );
     }

src/day.js

@@ -11,6 +11,7 @@ var Day = React.createClass({
     classes = React.addons.classSet({
       'datepicker__day': true,
       'datepicker__day--disabled': this.props.disabled,
+      'datepicker__day--in-range': this.props.inRange,
       'datepicker__day--selected': this.props.day.sameDay(this.props.selected),
       'datepicker__day--this-month': this.props.day.sameMonth(this.props.date),
       'datepicker__day--today': this.props.day.sameDay(moment())

src/stylesheets/datepicker.scss

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