Live (#8354)

src/components/forms/DateField/index.android.tsx

@@ -1,9 +1,10 @@
 import {useCallback, useImperativeHandle, useState} from 'react'
 import {Keyboard} from 'react-native'
 import DatePicker from 'react-native-date-picker'
+import {useLingui} from '@lingui/react'
 
 import {useTheme} from '#/alf'
-import {DateFieldProps} from '#/components/forms/DateField/types'
+import {type DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
@@ -21,6 +22,7 @@ export function DateField({
   accessibilityHint,
   maximumDate,
 }: DateFieldProps) {
+  const {i18n} = useLingui()
   const t = useTheme()
   const [open, setOpen] = useState(false)
 
@@ -80,6 +82,8 @@ export function DateField({
           onConfirm={onChangeInternal}
           onCancel={onCancel}
           mode="date"
+          locale={i18n.locale}
+          is24hourSource="locale"
           testID={`${testID}-datepicker`}
           aria-label={label}
           accessibilityLabel={label}

src/components/forms/DateField/index.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {DateFieldProps} from '#/components/forms/DateField/types'
+import {type DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
@@ -33,7 +33,7 @@ export function DateField({
   accessibilityHint,
   maximumDate,
 }: DateFieldProps) {
-  const {_} = useLingui()
+  const {_, i18n} = useLingui()
   const t = useTheme()
   const control = Dialog.useDialogControl()
 
@@ -83,10 +83,11 @@ export function DateField({
             <View style={[a.relative, a.w_full, a.align_center]}>
               <DatePicker
                 timeZoneOffsetInMinutes={0}
-                theme={t.name === 'light' ? 'light' : 'dark'}
+                theme={t.scheme}
                 date={new Date(toSimpleDateString(value))}
                 onDateChange={onChangeInternal}
                 mode="date"
+                locale={i18n.locale}
                 testID={`${testID}-datepicker`}
                 aria-label={label}
                 accessibilityLabel={label}