diff --git a/src/DateInput.jsx b/src/DateInput.jsx index 809bb8244..52d3c931d 100644 --- a/src/DateInput.jsx +++ b/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} diff --git a/src/DateInput/YearInput.jsx b/src/DateInput/YearInput.jsx index 1cf4103d7..c82b93369 100644 --- a/src/DateInput/YearInput.jsx +++ b/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 ( ); @@ -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, diff --git a/src/shared/utils.js b/src/shared/utils.js index 86303dd54..61f9aa265 100644 --- a/src/shared/utils.js +++ b/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)); }