[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