DatePickerInput component breaks automatic date separator when setting locale to "de" #296
Description
Current behaviour
When the locale of the DatePickerInput component is set to "de" (German), the functionality to add an automatic date separator ("." in the case of the German locale) is broken. Instead of appending a dot to the first two characters entered, the input gets changed to a single dot. Subsequently, any numbers entered are concatenated without the proper separator.
Example: After typing the digits "25" into the input field, the input field replaces the value to "." instead of "25."
Expected behaviour
When setting the locale to "de", the DatePickerInput component should correctly append a dot (".") to the first two characters entered and add subsequent characters after the dot, maintaining the proper date format.
How to reproduce?
- Set the locale of the DatePickerInput component to "de".
- Click on the input field to activate the date picker.
- Type in the first two characters of a date, for example, "15".
- Observe that the input is changed to ".", resulting in a single dot character.
- Continue entering numbers, such as "02".
- Notice that the input concatenates the numbers without the automatic date separator, resulting in ".02" instead of "15.02.".
Expo Snack: https://snack.expo.dev/@pragatheeswaransornarajan/react-native-paper-dates-input
Preview
date-picker-issue.mov
What have you tried so far?
Managed to find the lines that might have caused this issue. It is from this PR and the lines here.
In en locale, the value of replace is $1/$2/$3$4 whereas in de locale, the value of replace is ..........
The issue is reproducible in the latest version 0.18.1
Your Environment
| software | version |
|---|---|
| ios | x |
| android | x |
| react-native | 0.71.7 |
| react-native-paper | 5.8.0 |
| node | 18.16.0 |
| npm or yarn | x.x.x |
| expo sdk | x.x.x |