diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js index f2aa687c43e4..42904ba1a8c2 100644 --- a/src/components/NewDatePicker/CalendarPicker/index.js +++ b/src/components/NewDatePicker/CalendarPicker/index.js @@ -1,4 +1,4 @@ -import {addMonths, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, subMonths} from 'date-fns'; +import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns'; import Str from 'expensify-common/lib/str'; import PropTypes from 'prop-types'; import React from 'react'; @@ -127,8 +127,8 @@ class CalendarPicker extends React.PureComponent { const currentMonthView = this.state.currentDateView.getMonth(); const currentYearView = this.state.currentDateView.getFullYear(); const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView); - const hasAvailableDatesNextMonth = startOfDay(endOfMonth(new Date(this.props.maxDate))) > addMonths(new Date(this.state.currentDateView), 1); - const hasAvailableDatesPrevMonth = startOfDay(new Date(this.props.minDate)) < endOfMonth(subMonths(new Date(this.state.currentDateView), 1)); + const hasAvailableDatesNextMonth = startOfDay(new Date(this.props.maxDate)) > endOfMonth(new Date(this.state.currentDateView)); + const hasAvailableDatesPrevMonth = endOfDay(new Date(this.props.minDate)) < startOfMonth(new Date(this.state.currentDateView)); return ( @@ -219,7 +219,7 @@ class CalendarPicker extends React.PureComponent { const isBeforeMinDate = currentDate < startOfDay(new Date(this.props.minDate)); const isAfterMaxDate = currentDate > startOfDay(new Date(this.props.maxDate)); const isDisabled = !day || isBeforeMinDate || isAfterMaxDate; - const isSelected = isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day)); + const isSelected = !!day && isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day)); return ( { expect(getByTestId('next-month-arrow')).toBeDisabled(); }); + test('should allow navigating to the month of the max date when it has less days than the selected date', () => { + const maxDate = new Date('2003-11-27'); // This month has 30 days + const value = '2003-10-31'; + const {getByTestId} = render( + , + ); + + expect(getByTestId('next-month-arrow')).not.toBeDisabled(); + }); + test('should open the calendar on a month from max date if it is earlier than current month', () => { const onSelectedMock = jest.fn(); const maxDate = new Date('2011-03-01'); @@ -217,7 +230,7 @@ describe('CalendarPicker', () => { expect(getByLabelText('16')).not.toBeDisabled(); }); - test('should not allow to press max date', () => { + test('should allow to press max date', () => { const value = '2003-02-17'; const maxDate = new Date('2003-02-24'); const {getByLabelText} = render(