Allow full day states

Commit copied from PR onefinestay#57
https://github.com/onefinestay/react-daterange-picker/pull/57/commits

src/DateRangePicker.jsx

@@ -39,6 +39,7 @@ const DateRangePicker = createClass({
     defaultState: PropTypes.string,
     disableNavigation: PropTypes.bool,
     firstOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    fullDayStates: PropTypes.bool,
     helpMessage: PropTypes.string,
     initialDate: PropTypes.instanceOf(Date),
     initialFromValue: PropTypes.bool,
@@ -72,6 +73,7 @@ const DateRangePicker = createClass({
       className: '',
       numberOfCalendars: 1,
       firstOfWeek: 0,
+      fullDayStates: false,
       disableNavigation: false,
       nextLabel: '',
       previousLabel: '',
@@ -176,6 +178,12 @@ const DateRangePicker = createClass({
     let maxDate = absoluteMaximum;
     let dateCursor = moment(minDate).startOf('day');
 
+    // If states should always include the full day at the edges, we need to
+    // use different boundaries for the "default state" ranges we generate
+    // here. Otherwise the rendering code in CalenderDate cannot know if the
+    // day is at a boundary or not.
+    let shiftDays = this.props.fullDayStates ? 1 : 0;
+
     let defs = Immutable.fromJS(stateDefinitions);
 
     dateStates.forEach(function(s) {
@@ -187,8 +195,8 @@ const DateRangePicker = createClass({
         actualStates.push({
           state: defaultState,
           range: moment.range(
-            dateCursor,
-            start
+            moment(dateCursor).add(shiftDays, 'day'),
+            moment(start).subtract(shiftDays, 'day')
           ),
         });
       }
@@ -199,7 +207,7 @@ const DateRangePicker = createClass({
     actualStates.push({
       state: defaultState,
       range: moment.range(
-        dateCursor,
+        moment(dateCursor).add(shiftDays, 'day'),
         maxDate
       ),
     });
@@ -238,6 +246,12 @@ const DateRangePicker = createClass({
      * which direction to work
      */
     let blockedRanges = this.nonSelectableStateRanges().map(r => r.get('range'));
+    if (this.props.fullDayStates)
+      // range.intersect() ignores when one range ends on the same day
+      // the other begins; for the block to work, we have to extend the
+      // ranges by one day.
+      blockedRanges = blockedRanges.map(r => {
+        r = r.clone(); r.start.subtract(1, 'day'); r.end.add(1, 'day'); return r; });
     let intersect;
 
     if (forwards) {
@@ -466,6 +480,7 @@ const DateRangePicker = createClass({
       bemBlock,
       bemNamespace,
       firstOfWeek,
+      fullDayStates,
       numberOfCalendars,
       selectionType,
       value,
@@ -517,6 +532,7 @@ const DateRangePicker = createClass({
       dateStates,
       enabledRange,
       firstOfWeek,
+      fullDayStates,
       hideSelection,
       highlightedDate,
       highlightedRange,

src/calendar/CalendarDate.jsx

@@ -194,7 +194,7 @@ const CalendarDate = createClass({
       highlightModifier = 'single';
     }
 
-    if (numStates === 1) {
+    if (this.props.fullDayStates || numStates === 1) {
       // If there's only one state, it means we're not at a boundary
       color = states.getIn([0, 'color']);
 
@@ -228,7 +228,7 @@ const CalendarDate = createClass({
         onMouseEnter={this.mouseEnter}
         onMouseLeave={this.mouseLeave}
         onMouseDown={this.mouseDown}>
-        {numStates > 1 &&
+        {(numStates > 1 && !this.props.fullDayStates) &&
           <div className={this.cx({element: "HalfDateStates"})}>
             <CalendarDatePeriod period="am" color={amColor} />
             <CalendarDatePeriod period="pm" color={pmColor} />