Merge pull request #3119 from PrakashDurlabhji/issue_2810_1

Issue 2810 fix

Author: sushilshinde

__tests__/shared/components/challenge-listing/Filters/__snapshots__/DateRangePicker.jsx.snap

@@ -46,6 +46,7 @@ exports[`Matches shallow shapshot 1`] = `
       "calendarLabel": "Calendar",
       "chooseAvailableEndDate": [Function],
       "chooseAvailableStartDate": [Function],
+      "clearDate": "Clear Date",
       "clearDates": "Clear Dates",
       "closeDatePicker": "Close",
       "dateIsSelected": [Function],
@@ -57,8 +58,8 @@ exports[`Matches shallow shapshot 1`] = `
       "focusStartDate": "Interact with the calendar and add the check-in date for your trip.",
       "hideKeyboardShortcutsPanel": "Close the shortcuts panel.",
       "homeEnd": "Home and end keys",
-      "jumpToNextMonth": "Move forward to switch to the next month.",
-      "jumpToPrevMonth": "Move backward to switch to the previous month.",
+      "jumpToNextMonth": "Next Month",
+      "jumpToPrevMonth": "Previous Month",
       "keyboardNavigationInstructions": "Press the down arrow key to interact with the calendar and
   select a date. Press the question mark key to get the keyboard shortcuts for changing dates.",
       "keyboardShortcuts": "Keyboard Shortcuts",

src/shared/components/challenge-listing/Filters/DateRangePicker.jsx

@@ -17,6 +17,7 @@ import 'react-dates/initialize';
 import { DateRangePicker as WrappedDateRangePicker } from 'react-dates';
 import 'react-dates/lib/css/_datepicker.css';
 import './_fix_DateInput__input.css';
+import defaultPhrases from 'react-dates/lib/defaultPhrases';
 
 class DateRangePicker extends React.Component {
   constructor(props) {
@@ -37,6 +38,11 @@ class DateRangePicker extends React.Component {
     const {
       focusedInput,
     } = this.state;
+    const phraseOverrides = {
+      ...defaultPhrases,
+      jumpToPrevMonth: 'Previous Month',
+      jumpToNextMonth: 'Next Month',
+    };
     return (
       <WrappedDateRangePicker
         hideKeyboardShortcutsPanel
@@ -52,6 +58,7 @@ class DateRangePicker extends React.Component {
         anchorDirection="right"
         displayFormat="MMM DD, YYYY"
         readOnly={readOnly}
+        phrases={phraseOverrides}
       />
     );
   }