Merge pull request #572 from mxenabled/moore/defaulting_date_range_pi…

…cker_to_last_date Moore/defaulting date range picker to last date
mxenabled · May 9, 2017 · a905c6b · a905c6b
2 parents 13181e8 + 23c06d5
commit a905c6b
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js
@@ -48,7 +48,18 @@ DefaultRanges.propTypes = {
   })
 };
 
-const MonthTable = ({ activeSelectDate, currentDate, getDateRangePosition, handleDateHover, handleDateSelect, isInActiveRange, minimumDate, selectedEndDate, selectedStartDate, styles }) => {
+const MonthTable = ({
+  activeSelectDate,
+  currentDate,
+  getDateRangePosition,
+  handleDateHover,
+  handleDateSelect,
+  isInActiveRange,
+  minimumDate,
+  selectedEndDate,
+  selectedStartDate,
+  styles
+}) => {
   const days = [];
   let startDate = moment.unix(currentDate).startOf('month').startOf('week');
   const endDate = moment.unix(currentDate).endOf('month').endOf('week');
@@ -164,14 +175,17 @@ class DateRangePicker extends React.Component {
   };
 
   state = {
-    currentDate: this.props.selectedStartDate || moment().unix(),
+    currentDate: this.props.selectedEndDate || moment().unix(),
     showCalendar: false
   };
 
   componentWillReceiveProps (newProps) {
-    if (newProps.selectedStartDate && newProps.selectedStartDate !== this.props.selectedStartDate) {
+    const isUpdatedSelectedEndDate = newProps.selectedEndDate && newProps.selectedEndDate !== this.props.selectedEndDate;
+    const isUpdatedSelectedStartDate = newProps.selectedStartDate && newProps.selectedStartDate !== this.props.selectedStartDate;
+
+    if (isUpdatedSelectedEndDate || isUpdatedSelectedStartDate) {
       this.setState({
-        currentDate: newProps.selectedStartDate
+        currentDate: newProps.selectedEndDate ? newProps.selectedEndDate : newProps.selectedStartDate
       });
     }
   }
@@ -355,7 +369,7 @@ class DateRangePicker extends React.Component {
                       type='caret-left'
                     />
                     <div>
-                      {moment(this.state.currentDate, 'X').format('MMMM YYYY')}
+                      {moment(this.props.selectedEndDate ? this.props.selectedEndDate : this.state.currentDate, 'X').format('MMMM YYYY')}
                     </div>
                     <Icon
                       elementProps={{
@@ -367,13 +381,19 @@ class DateRangePicker extends React.Component {
                     />
                   </div>
                   <div style={styles.calendarWeek}>
-                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => {
-                      return (
-                        <div key={day + i} style={styles.calendarWeekDay}>
-                          {day}
-                        </div>
-                      );
-                    })}
+                    {[{ label: 'S', value: 'Sunday' },
+                      { label: 'M', value: 'Monday' },
+                      { label: 'T', value: 'Tuesday' },
+                      { label: 'W', value: 'Wednesday' },
+                      { label: 'T', value: 'Thursday' },
+                      { label: 'F', value: 'Friday' },
+                      { label: 'S', value: 'Saturday' }].map((day) => {
+                        return (
+                          <div key={day.value} style={styles.calendarWeekDay}>
+                            {day.label}
+                          </div>
+                        );
+                      })}
                   </div>
                   <MonthTable
                     activeSelectDate={this.state.activeSelectDate}