diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js index 1ac9ab6a0..dbf5e05cc 100644 --- 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' />
- {moment(this.state.currentDate, 'X').format('MMMM YYYY')} + {moment(this.props.selectedEndDate ? this.props.selectedEndDate : this.state.currentDate, 'X').format('MMMM YYYY')}
- {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => { - return ( -
- {day} -
- ); - })} + {[{ 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 ( +
+ {day.label} +
+ ); + })}