Add support for localized years

src/DateInput.jsx

@@ -15,7 +15,7 @@ import {
   getEnd,
 } from './shared/dates';
 import { isMaxDate, isMinDate } from './shared/propTypes';
-import { between } from './shared/utils';
+import { between, getYearOffset } from './shared/utils';
 
 const defaultMinDate = new Date();
 defaultMinDate.setFullYear(1, 0, 1);
@@ -377,9 +377,17 @@ export default class DateInput extends PureComponent {
    */
   onChange = (event) => {
     const { name, value } = event.target;
+    const { locale } = this.props;
 
     this.setState(
-      { [name]: value },
+      () => {
+        if (name === 'year') {
+          const offset = getYearOffset(locale);
+          return { [name]: value !== null && value !== '' ? `${value - offset}` : null };
+        }
+
+        return { [name]: value };
+      },
       this.onChangeExternal,
     );
   }
@@ -434,7 +442,8 @@ export default class DateInput extends PureComponent {
 
     const values = {};
     formElements.forEach((formElement) => {
-      values[formElement.name] = formElement.value;
+      const { [formElement.name]: value } = this.state;
+      values[formElement.name] = value;
     });
 
     if (formElements.every((formElement) => !formElement.value)) {
@@ -534,7 +543,9 @@ export default class DateInput extends PureComponent {
   }
 
   renderYear = (currentMatch, index) => {
-    const { autoFocus, yearAriaLabel, yearPlaceholder } = this.props;
+    const {
+      autoFocus, locale, yearAriaLabel, yearPlaceholder,
+    } = this.props;
     const { year } = this.state;
 
     return (
@@ -544,6 +555,7 @@ export default class DateInput extends PureComponent {
         ariaLabel={yearAriaLabel}
         autoFocus={index === 0 && autoFocus}
         inputRef={this.yearInput}
+        locale={locale}
         placeholder={yearPlaceholder}
         value={year}
         valueType={this.valueType}

src/DateInput/YearInput.jsx

@@ -10,18 +10,26 @@ import {
   isRef,
   isValueType,
 } from '../shared/propTypes';
-import { safeMax, safeMin } from '../shared/utils';
+import { getYearOffset, safeMax, safeMin } from '../shared/utils';
 
 export default function YearInput({
+  locale,
   maxDate,
   minDate,
   placeholder = '----',
+  value,
   valueType,
   ...otherProps
 }) {
   const maxYear = safeMin(275760, maxDate && getYear(maxDate));
   const minYear = safeMax(1, minDate && getYear(minDate));
 
+  const offset = getYearOffset(locale);
+
+  const localizedMaxYear = maxYear + offset;
+  const localizedMinYear = minYear + offset;
+  const localizedValue = value !== null && value !== '' ? `${Number(value) + offset}` : null;
+
   const yearStep = (() => {
     if (valueType === 'century') {
       return 10;
@@ -32,11 +40,12 @@ export default function YearInput({
 
   return (
     <Input
-      max={maxYear}
-      min={minYear}
+      max={localizedMaxYear}
+      min={localizedMinYear}
       name="year"
       placeholder={placeholder}
       step={yearStep}
+      value={localizedValue}
       {...otherProps}
     />
   );
@@ -47,6 +56,7 @@ YearInput.propTypes = {
   className: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   inputRef: isRef,
+  locale: PropTypes.string,
   maxDate: isMaxDate,
   minDate: isMinDate,
   onChange: PropTypes.func,

src/shared/utils.js

@@ -1,3 +1,5 @@
+import { getFormatter } from './dateFormatter';
+
 /**
  * Returns a value no smaller than min and no larger than max.
  *
@@ -15,6 +17,13 @@ export function between(value, min, max) {
   return value;
 }
 
+export function getYearOffset(locale) {
+  const now = new Date();
+  return Number(
+    getFormatter({ year: 'numeric' })(locale, now).match(/\d{1,}/)[0],
+  ) - now.getFullYear();
+}
+
 function isValidNumber(num) {
   return num !== null && num !== false && !Number.isNaN(Number(num));
 }