diff --git a/app/Http/Controllers/JavascriptController.php b/app/Http/Controllers/JavascriptController.php
index b86a737777..fe97ee0501 100644
--- a/app/Http/Controllers/JavascriptController.php
+++ b/app/Http/Controllers/JavascriptController.php
@@ -142,26 +142,23 @@ class JavascriptController extends Controller
         ];
         Log::debug(sprintf('viewRange is %s', $viewRange));
 
-        // get the format for the ranges:
-        $format = $this->getFormatByRange($viewRange);
-
         // when current range is a custom range, add the current period as the next range.
         if ($isCustom) {
             Log::debug('Custom is true.');
-            $index             = $start->formatLocalized($format);
+            $index             = Navigation::periodShow($start, $viewRange);
             $customPeriodStart = Navigation::startOfPeriod($start, $viewRange);
             $customPeriodEnd   = Navigation::endOfPeriod($customPeriodStart, $viewRange);
             $ranges[$index]    = [$customPeriodStart, $customPeriodEnd];
         }
         // then add previous range and next range
         $previousDate   = Navigation::subtractPeriod($start, $viewRange);
-        $index          = $previousDate->formatLocalized($format);
+        $index          = Navigation::periodShow($previousDate, $viewRange);
         $previousStart  = Navigation::startOfPeriod($previousDate, $viewRange);
         $previousEnd    = Navigation::endOfPeriod($previousStart, $viewRange);
         $ranges[$index] = [$previousStart, $previousEnd];
 
         $nextDate       = Navigation::addPeriod($start, $viewRange, 0);
-        $index          = $nextDate->formatLocalized($format);
+        $index          = Navigation::periodShow($nextDate, $viewRange);
         $nextStart      = Navigation::startOfPeriod($nextDate, $viewRange);
         $nextEnd        = Navigation::endOfPeriod($nextStart, $viewRange);
         $ranges[$index] = [$nextStart, $nextEnd];
@@ -188,33 +185,4 @@ class JavascriptController extends Controller
         return $return;
 
     }
-
-    private function getFormatByRange(string $viewRange): string
-    {
-        switch ($viewRange) {
-            default:
-                throw new FireflyException(sprintf('The date picker does not yet support "%s".', $viewRange)); // @codeCoverageIgnore
-            case '1D':
-            case 'custom':
-                $format = (string)trans('config.month_and_day');
-                break;
-            case '3M':
-                $format = (string)trans('config.quarter_of_year');
-                break;
-            case '6M':
-                $format = (string)trans('config.half_year');
-                break;
-            case '1Y':
-                $format = (string)trans('config.year');
-                break;
-            case '1M':
-                $format = (string)trans('config.month');
-                break;
-            case '1W':
-                $format = (string)trans('config.week_in_year');
-                break;
-        }
-
-        return $format;
-    }
 }
diff --git a/app/Support/Navigation.php b/app/Support/Navigation.php
index b69e00841a..3df169a12b 100644
--- a/app/Support/Navigation.php
+++ b/app/Support/Navigation.php
@@ -233,7 +233,7 @@ class Navigation
      */
     public function periodShow(Carbon $theDate, string $repeatFrequency): string
     {
-        $date = clone $theDate;
+        $date      = clone $theDate;
         $formatMap = [
             '1D'      => trans('config.specific_day'),
             'daily'   => trans('config.specific_day'),
@@ -241,8 +241,8 @@ class Navigation
             '1W'      => trans('config.week_in_year'),
             'week'    => trans('config.week_in_year'),
             'weekly'  => trans('config.week_in_year'),
-            '3M'      => trans('config.quarter_of_year'),
-            'quarter' => trans('config.quarter_of_year'),
+            //'3M'      => trans('config.quarter_of_year'),
+            //'quarter' => trans('config.quarter_of_year'),
             '1M'      => trans('config.month'),
             'month'   => trans('config.month'),
             'monthly' => trans('config.month'),
@@ -253,10 +253,16 @@ class Navigation
 
         ];
 
-
         if (isset($formatMap[$repeatFrequency])) {
             return $date->formatLocalized(strval($formatMap[$repeatFrequency]));
         }
+        if ($repeatFrequency === '3M' || $repeatFrequency === 'quarter') {
+            $quarter = ceil($theDate->month / 3);
+
+            return sprintf('Q%d %d', $quarter, $theDate->year);
+        }
+
+        // special formatter for quarter of year
         throw new FireflyException(sprintf('No date formats for frequency "%s"!', $repeatFrequency));
     }