Translate date ranges on contributors page

app/assets/javascripts/graphs/stat_graph_contributors.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 
 import _ from 'underscore';
-import d3 from 'd3';
 import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
 import ContributorsStatGraphUtil from './stat_graph_contributors_util';
-import { n__ } from '../locale';
+import { n__, s__, createDateTimeFormat, sprintf } from '../locale';
 
 export default (function() {
-  function ContributorsStatGraph() {}
+  function ContributorsStatGraph() {
+    this.dateFormat = createDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' });
+  }
 
   ContributorsStatGraph.prototype.init = function(log) {
     var author_commits, total_commits;
@@ -95,11 +96,15 @@ export default (function() {
   };
 
   ContributorsStatGraph.prototype.change_date_header = function() {
-    var print, print_date_format, x_domain;
-    x_domain = ContributorsGraph.prototype.x_domain;
-    print_date_format = d3.time.format("%B %e %Y");
-    print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
-    return $("#date_header").text(print);
+    const x_domain = ContributorsGraph.prototype.x_domain;
+    const formattedDateRange = sprintf(
+      s__('ContributorsPage|%{startDate} – %{endDate}'),
+      {
+        startDate: this.dateFormat.format(new Date(x_domain[0])),
+        endDate: this.dateFormat.format(new Date(x_domain[1])),
+      },
+    );
+    return $('#date_header').text(formattedDateRange);
   };
 
   ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {

spec/javascripts/graphs/stat_graph_contributors_spec.js

+import ContributorsStatGraph from '~/graphs/stat_graph_contributors';
+import { ContributorsGraph } from '~/graphs/stat_graph_contributors_graph';
+
+import { setLanguage } from '../helpers/locale_helper';
+
+describe('ContributorsStatGraph', () => {
+  describe('change_date_header', () => {
+    beforeAll(() => {
+      setLanguage('de');
+    });
+
+    afterAll(() => {
+      setLanguage(null);
+    });
+
+    it('uses the locale to display date ranges', () => {
+      ContributorsGraph.init_x_domain([{ date: '2013-01-31' }, { date: '2012-01-31' }]);
+      setFixtures('<div id="date_header"></div>');
+      const graph = new ContributorsStatGraph();
+
+      graph.change_date_header();
+
+      expect(document.getElementById('date_header').innerText).toBe('31. Januar 2012 – 31. Januar 2013');
+    });
+  });
+});