diff --git a/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts b/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts index bc6d66ec669..c83c1e412eb 100644 --- a/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts +++ b/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts @@ -62,6 +62,45 @@ const studioResources: Record = { 'timeAgo.seconds.minimal': '{{count}}m', /* Relative time, granularity: seconds, using a minimal format, configured to show ago suffix*/ 'timeAgo.seconds.minimal.ago': '{{count}}m ago', + + /** --- DateTime (and Date) Input --- */ + + /** Action message for navigating to previous month */ + 'inputs.datetime.calendar.action.previous-month': `Forrige måned`, + /** Action message for navigating to next year */ + 'inputs.datetime.calendar.action.next-year': `Neste år`, + /** Action message for navigating to previous year */ + 'inputs.datetime.calendar.action.previous-year': `Forrige år`, + /** Action message for selecting hour */ + 'inputs.datetime.calendar.action.select-hour': `Velg time`, + /** Action message for setting to current time */ + 'inputs.datetime.calendar.action.set-to-current-time': `Sett til nå`, + + /** Month names */ + 'inputs.datetime.calendar.month-names.january': 'Januar', + 'inputs.datetime.calendar.month-names.february': 'Februar', + 'inputs.datetime.calendar.month-names.march': 'Mars', + 'inputs.datetime.calendar.month-names.april': 'April', + 'inputs.datetime.calendar.month-names.may': 'Mai', + 'inputs.datetime.calendar.month-names.june': 'Juni', + 'inputs.datetime.calendar.month-names.july': 'Juli', + 'inputs.datetime.calendar.month-names.august': 'August', + 'inputs.datetime.calendar.month-names.september': 'September', + 'inputs.datetime.calendar.month-names.october': 'Oktober', + 'inputs.datetime.calendar.month-names.november': 'November', + 'inputs.datetime.calendar.month-names.december': 'Desember', + + /** Short weekday names */ + 'inputs.datetime.calendar.weekday-names.short.monday': 'Man', + 'inputs.datetime.calendar.weekday-names.short.tuesday': 'Tir', + 'inputs.datetime.calendar.weekday-names.short.wednesday': 'Ons', + 'inputs.datetime.calendar.weekday-names.short.thursday': 'Tor', + 'inputs.datetime.calendar.weekday-names.short.friday': 'Fre', + 'inputs.datetime.calendar.weekday-names.short.saturday': 'Lør', + 'inputs.datetime.calendar.weekday-names.short.sunday': 'Søn', + + /** Label for selecting a hour preset. Receives a `time` param as a string on hh:mm format and a `date` param as a Date instance denoting the preset date */ + 'inputs.datetime.calendar.action.set-to-time-preset': '{{time}} on {{date, datetime}}', } export default studioResources diff --git a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx index 2cebc298f80..ee1a052a335 100644 --- a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx +++ b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx @@ -5,6 +5,7 @@ import React, {useEffect} from 'react' import {TextInput, useForwardedRef} from '@sanity/ui' import {DateTimeInput} from './base/DateTimeInput' import {ParseResult} from './types' +import {CalendarLabels} from './base/calendar/types' export interface CommonDateTimeInputProps { id: string @@ -18,6 +19,7 @@ export interface CommonDateTimeInputProps { serialize: (date: Date) => string timeStep?: number value: string | undefined + calendarLabels: CalendarLabels } const DEFAULT_PLACEHOLDER_TIME = new Date() @@ -91,6 +93,7 @@ export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput ) : ( parse(value, VALUE_FORMAT) const serialize = (date: Date) => format(date, VALUE_FORMAT) @@ -39,7 +25,8 @@ const serialize = (date: Date) => format(date, VALUE_FORMAT) * @beta */ export function DateInput(props: DateInputProps) { const {readOnly, onChange, schemaType, elementProps, value} = props - const {dateFormat} = parseOptions(schemaType.options) + const dateFormat = schemaType.options?.dateFormat || DEFAULT_DATE_FORMAT + const {t} = useTranslation() const handleChange = useCallback( (nextDate: string | null) => { @@ -55,6 +42,7 @@ export function DateInput(props: DateInputProps) { [dateFormat], ) + const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(t), [t]) return ( { @@ -95,10 +95,11 @@ export function DateTimeInput(props: DateTimeInputProps) { (inputValue: string) => parse(inputValue, `${dateFormat} ${timeFormat}`), [dateFormat, timeFormat], ) - + const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(t), [t]) return ( `${time} on ${format(date, 'yyyy-MM-dd')}`, +} + async function renderInput() { const onChange = jest.fn() @@ -42,6 +67,7 @@ async function renderInput() { return ( , 'onChange'> & { @@ -7,10 +8,11 @@ export const DatePicker = React.forwardRef(function DatePicker( onChange: (nextDate: Date) => void selectTime?: boolean timeStep?: number + calendarLabels: CalendarLabels }, ref: React.ForwardedRef, ) { - const {value = new Date(), onChange, ...rest} = props + const {value = new Date(), onChange, calendarLabels, ...rest} = props const [focusedDate, setFocusedDay] = React.useState() const handleSelect = React.useCallback( @@ -24,6 +26,7 @@ export const DatePicker = React.forwardRef(function DatePicker( return ( , ) { - const {value, inputValue, onInputChange, onChange, selectTime, timeStep, ...rest} = props + const { + value, + inputValue, + onInputChange, + onChange, + selectTime, + timeStep, + calendarLabels, + ...rest + } = props const [popoverRef, setPopoverRef] = useState(null) const forwardedRef = useForwardedRef(ref) const buttonRef = useRef(null) @@ -78,6 +89,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput( , 'onSelect'> & { selectTime?: boolean @@ -16,6 +17,7 @@ type CalendarProps = Omit, 'onSelect'> & { onSelect: (date: Date) => void focusedDate: Date onFocusedDateChange: (index: Date) => void + labels: CalendarLabels } // This is used to maintain focus on a child element of the calendar-grid between re-renders @@ -44,6 +46,7 @@ export const Calendar = forwardRef(function Calendar( focusedDate = selectedDate, timeStep = 1, onSelect, + labels, ...restProps } = props @@ -185,12 +188,15 @@ export const Calendar = forwardRef(function Calendar( @@ -206,6 +212,7 @@ export const Calendar = forwardRef(function Calendar( tabIndex={0} > - {MONTH_NAMES.map((m, i) => ( + {monthNames.map((m, i) => ( // eslint-disable-next-line react/no-array-index-key