[React-Native-Windows] Cant format the date, change input styles (font family, font size) and change language

[jloracudris]

Bug report

Summary

Hello!

Guys im using React Native Windows, and i want to do some basic stuff but i cant!

this is how i'm using it

<DateTimePicker mode="date" display="default" locale={"es"} testID="date-input" onChange={(event, selectedDate) => { const currentDate = selectedDate || values.dateOfBirth; setFieldValue('dateOfBirth', currentDate); onChange('dateOfBirth', currentDate.toISOString()); }} value={values.dateOfBirth} style={[styles.codeInput, {height: 55}]} textColor="red" // this color also doesnt work />

1. Format: Apparently i cannot format the date is getting displayed in the input (It gets the format from the system), when trying to use the formatDate im getting an error

Type '{ mode: "date"; display: "default"; locale: string; dateFormat: string; testID: string; onChange: (event: DateTimePickerEvent, selectedDate: Date) => void; value: Date; style: ({ ...; } | { ...; })[]; textColor: string; }' is not assignable to type 'IntrinsicAttributes & (Readonly<Readonly<Omit<ViewProps, "children"> & BaseOptions & { maximumDate?: Date; minimumDate?: Date; } & { ...; }> & { ...; }> | Readonly<...> | Readonly<...>)'. Property 'dateFormat' does not exist on type '(IntrinsicAttributes & Readonly<Readonly<Omit<ViewProps, "children"> & BaseOptions & { maximumDate?: Date; minimumDate?: Date; } & { ...; }> & { ...; }>) | (IntrinsicAttributes & Readonly<...>)'.ts(2322)

2. Styling: I cannot style the text in the input, i want to be able to change the font family and the font size and its no possible

3. Locale: I configured my Datepicker to locale='es' or locale='es-ES' and its always in english, is it possible to change ?

Reproducible sample code

I cant have a reproduceable code for react native windows, please refer to the summary theres nothing much to add there

Steps to reproduce

use it like this <DateTimePicker mode="date" display="default" locale={"es"} testID="date-input" onChange={(event, selectedDate) => { const currentDate = selectedDate || values.dateOfBirth; setFieldValue('dateOfBirth', currentDate); onChange('dateOfBirth', currentDate.toISOString()); }} value={values.dateOfBirth} style={[styles.codeInput, {height: 55}]} textColor="red" // this color also doesnt work /> and you wont be able to format your date, style the input or change the locale

Environment info

npx react-native info output: System: OS: Windows 11 10.0.26100 CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz Memory: 10.90 GB / 31.73 GB Binaries: Node: version: 18.20.8 path: c:\Program Files\nodejs\node.EXE Yarn: version: 1.22.22 path: C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: version: 10.8.2 path: c:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled Versions: - 10.0.18362.0 - 10.0.19041.0 - 10.0.22621.0 IDEs: Android Studio: Not Found Visual Studio: - 17.13.35825.156 (Visual Studio Community 2022) Languages: Java: Not Found Ruby: Not Found npmPackages: "@react-native-community/cli": installed: 15.0.1 wanted: 15.0.1 react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.77.2 wanted: ^0.77.0 react-native-windows: installed: 0.77.0 wanted: 0.77.0 npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: Not found newArchEnabled: Not found

info React Native v0.79.2 is now available (your project is running on v0.77.2).

# paste it here

Time zone name (If the problem you have is related to unexpected time / date. See list in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).

"@react-native-community/datetimepicker": "^8.3.0",

iOS / Android version: Im using Windows