diff --git a/src/components/CalendarPicker/calendarPickerPropTypes.js b/src/components/CalendarPicker/calendarPickerPropTypes.js index 9efb999ebdb8..03c142e4736d 100644 --- a/src/components/CalendarPicker/calendarPickerPropTypes.js +++ b/src/components/CalendarPicker/calendarPickerPropTypes.js @@ -15,11 +15,17 @@ const propTypes = { /** Default year to be set in the calendar picker. Used with navigation to set the correct year after going back to the view with calendar */ selectedYear: PropTypes.string, + /** Default month to be set in the calendar picker. Used to keep last selected month after going back to the view with calendar */ + selectedMonth: PropTypes.number, + /** A function that is called when the date changed inside the calendar component */ onChanged: PropTypes.func, /** A function called when the date is selected */ onSelected: PropTypes.func, + + /** A function called when the year picker is opened */ + onYearPickerOpen: PropTypes.func, }; const defaultProps = { @@ -27,8 +33,10 @@ const defaultProps = { minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(), maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(), selectedYear: null, + selectedMonth: null, onChanged: () => {}, onSelected: () => {}, + onYearPickerOpen: () => {}, }; export {propTypes, defaultProps}; diff --git a/src/components/CalendarPicker/index.js b/src/components/CalendarPicker/index.js index a0f3e174ffa3..d0103d03f959 100644 --- a/src/components/CalendarPicker/index.js +++ b/src/components/CalendarPicker/index.js @@ -25,6 +25,9 @@ class CalendarPicker extends React.PureComponent { if (props.selectedYear) { currentDateView = moment(currentDateView).set('year', props.selectedYear).toDate(); } + if (props.selectedMonth != null) { + currentDateView = moment(currentDateView).set('month', props.selectedMonth).toDate(); + } if (props.maxDate < currentDateView) { currentDateView = props.maxDate; } else if (props.minDate > currentDateView) { @@ -68,6 +71,7 @@ class CalendarPicker extends React.PureComponent { const maxYear = moment(this.props.maxDate).year(); const currentYear = this.state.currentDateView.getFullYear(); Navigation.navigate(ROUTES.getYearSelectionRoute(minYear, maxYear, currentYear, Navigation.getActiveRoute())); + this.props.onYearPickerOpen(this.state.currentDateView); } /** diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index c5df338f4206..b88c85d64b48 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -24,12 +24,14 @@ class NewDatePicker extends React.Component { this.state = { isPickerVisible: false, + selectedMonth: null, selectedDate: moment(props.value || props.defaultValue || undefined).toDate(), }; this.setDate = this.setDate.bind(this); this.showPicker = this.showPicker.bind(this); this.hidePicker = this.hidePicker.bind(this); + this.setCurrentSelectedMonth = this.setCurrentSelectedMonth.bind(this); this.opacity = new Animated.Value(0); @@ -59,6 +61,15 @@ class NewDatePicker extends React.Component { this.unsubscribeEscapeKey(); } + /** + * Updates selected month when year picker is opened. + * This is used to keep the last visible month in the calendar when going back from year picker screen. + * @param {Date} currentDateView + */ + setCurrentSelectedMonth(currentDateView) { + this.setState({selectedMonth: currentDateView.getMonth()}); + } + /** * Trigger the `onInputChange` handler when the user input has a complete date or is cleared * @param {Date} selectedDate @@ -149,7 +160,9 @@ class NewDatePicker extends React.Component { maxDate={this.props.maxDate} value={this.state.selectedDate} onSelected={this.setDate} + selectedMonth={this.state.selectedMonth} selectedYear={this.props.selectedYear} + onYearPickerOpen={this.setCurrentSelectedMonth} /> )