Juse use existing DateInput for now

src/components/dialogs/BirthDateSettings.tsx

@@ -5,6 +5,7 @@ import {View} from 'react-native'
 
 import * as Dialog from '#/components/Dialog'
 import {Text} from '../Typography'
+import {DateInput} from '#/view/com/util/forms/DateInput'
 import {logger} from '#/logger'
 import {
   usePreferencesQuery,
@@ -17,7 +18,6 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {cleanError} from '#/lib/strings/errors'
 import {isIOS, isWeb} from '#/platform/detection'
 import {Loader} from '#/components/Loader'
-import {DateField, utils} from '#/components/forms/DateField'
 
 export function BirthDateSettingsDialog({
   control,
@@ -72,26 +72,20 @@ function BirthdayInner({
   preferences: UsePreferencesQueryResponse
 }) {
   const {_} = useLingui()
-  const [date, setDate] = React.useState(
+  const [date, setDate] = React.useState(preferences.birthDate || new Date())
-    utils.toSimpleDateString(preferences.birthDate || new Date()),
-  )
   const {
     isPending,
     isError,
     error,
     mutateAsync: setBirthDate,
   } = usePreferencesSetBirthDateMutation()
-  const hasChanged = React.useMemo(
+  const hasChanged = date !== preferences.birthDate
-    () =>
-      date !== utils.toSimpleDateString(preferences.birthDate || new Date()),
-    [date, preferences.birthDate],
-  )
 
   const onSave = React.useCallback(async () => {
     try {
       // skip if date is the same
       if (hasChanged) {
-        await setBirthDate({birthDate: new Date(date)})
+        await setBirthDate({birthDate: date})
       }
       control.close()
     } catch (e: any) {
@@ -102,10 +96,17 @@ function BirthdayInner({
   return (
     <View style={a.gap_lg} testID="birthDateSettingsDialog">
       <View style={isIOS && [a.w_full, a.align_center]}>
-        <DateField
+        <DateInput
-          label={_(msg`Enter your birthday`)}
+          handleAsUTC
+          testID="birthdayInput"
           value={date}
-          onChangeDate={setDate}
+          onChange={setDate}
+          buttonType="default-light"
+          buttonStyle={[a.rounded_sm]}
+          buttonLabelType="lg"
+          accessibilityLabel={_(msg`Birthday`)}
+          accessibilityHint={_(msg`Enter your birth date`)}
+          accessibilityLabelledBy="birthDate"
         />
       </View>
 

src/state/queries/preferences/index.ts

@@ -173,9 +173,12 @@ export function usePreferencesSetAdultContentMutation() {
 export function usePreferencesSetBirthDateMutation() {
   const queryClient = useQueryClient()
 
-  return useMutation<void, unknown, {birthDate: Date}>({
+  return useMutation<void, unknown, {birthDate: Date | string}>({
-    mutationFn: async ({birthDate}: {birthDate: Date}) => {
+    mutationFn: async ({birthDate}: {birthDate: Date | string}) => {
-      await getAgent().setPersonalDetails({birthDate: birthDate.toISOString()})
+      await getAgent().setPersonalDetails({
+        birthDate:
+          typeof birthDate === 'string' ? birthDate : birthDate.toISOString(),
+      })
       // triggers a refetch
       await queryClient.invalidateQueries({
         queryKey: preferencesQueryKey,