Selection in PrimeReact Calendar Component #3322
Unanswered
JSoaress
asked this question in
PrimeReact
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Good afternoon,
When using the Calendar component, I am trying to achieve certain behaviors to improve user interaction, but I haven't had any luck.
The problem:
If the user selects the entire input and starts typing, the first digit is ignored, and they need to clear the input to retype everything.
If the user selects a part of the date (e.g., the year) and types, a bug occurs, requiring the user to re-enter the entire date.
Expected behavior:
When the user starts typing in a cleared field, the slashes should be filled automatically. Example: For 06/01/2025 (dd/mm/yyyy format), typing 06012025 should suffice.
If the user selects part of the date, such as the year, they should be able to edit just the selected portion without losing the rest of the existing value.
My current component:
<Calendar
value={value}
showIcon
showButtonBar
locale="br"
dateFormat="dd/mm/yy"
mask="99/99/9999"
showOnFocus={false}
monthNavigator
yearNavigator
monthNavigatorTemplate={monthNavigatorTemplate}
yearNavigatorTemplate={yearNavigatorTemplate}
yearRange={
1900:${new Date().getFullYear() + 10}
}placeholder="dd/mm/aaaa"
{...props}
/>
PrimeReact version: 9.6.0
Thank you!
Beta Was this translation helpful? Give feedback.
All reactions