diff --git a/packages/@react-spectrum/datepicker/intl/en-US-.json b/packages/@react-spectrum/datepicker/intl/en-US-.json new file mode 100644 index 00000000000..fcd26e0574f --- /dev/null +++ b/packages/@react-spectrum/datepicker/intl/en-US-.json @@ -0,0 +1,5 @@ +{ + "time": "Time", + "startTime": "Start time", + "endTime": "End time" +} diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx index 2488828b532..ffda4d9021f 100644 --- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx @@ -22,6 +22,8 @@ import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; import {FocusableRef} from '@react-types/shared'; import {Input} from './Input'; +// @ts-ignore +import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; import '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup @@ -32,7 +34,7 @@ import {useDatePickerState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils'; import {useFocusRing} from '@react-aria/focus'; import {useHover} from '@react-aria/interactions'; -import {useLocale} from '@react-aria/i18n'; +import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; function DatePicker(props: SpectrumDatePickerProps, ref: FocusableRef) { @@ -55,6 +57,7 @@ function DatePicker(props: SpectrumDatePickerProps, ref: let {isOpen, setOpen} = state; let {direction} = useLocale(); let domRef = useFocusManagerRef(ref); + let stringFormatter = useLocalizedStringFormatter(intlMessages); let {isFocused, isFocusVisible, focusProps} = useFocusRing({ within: true, @@ -159,7 +162,7 @@ function DatePicker(props: SpectrumDatePickerProps, ref: {showTimeField &&
(props: SpectrumDateRangePickerProps, ref: FocusableRef) { @@ -55,6 +57,7 @@ function DateRangePicker(props: SpectrumDateRangePickerProp let {isOpen, setOpen} = state; let {direction} = useLocale(); let domRef = useFocusManagerRef(ref); + let stringFormatter = useLocalizedStringFormatter(intlMessages); let {isFocused, isFocusVisible, focusProps} = useFocusRing({ within: true, @@ -173,7 +176,7 @@ function DateRangePicker(props: SpectrumDateRangePickerProp {showTimeField && state.setTime('start', v)} placeholderValue={timePlaceholder} @@ -184,7 +187,7 @@ function DateRangePicker(props: SpectrumDateRangePickerProp hideTimeZone={props.hideTimeZone} flex /> state.setTime('end', v)} placeholderValue={timePlaceholder}