enhanced Date Time component #9379
Conversation
WalkthroughThe changes made to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
src/components/Common/DateTextInput.tsx (1)
Line range hint
1-201: Consider enhancing component accessibility and type safetyThe component could benefit from several improvements:
- Add proper ARIA labels for screen readers
- Leverage dayjs for comprehensive date validation
- Define proper TypeScript types for the component's state
Consider these enhancements:
// Define proper types type DateInputField = 'date' | 'month' | 'year' | 'hour' | 'minute'; type EditingText = Record<DateInputField, string>; // Add aria labels <input aria-label={`Enter ${key}`} role="spinbutton" aria-valuemin={key === "date" ? 1 : key === "month" ? 1 : 0} aria-valuemax={key === "date" ? 31 : key === "month" ? 12 : key === "year" ? 2999 : key === "hour" ? 23 : 59} // ... other props /> // Use dayjs for validation const isValidDate = (date: EditingText) => { return dayjs(`${date.year}-${date.month}-${date.date} ${date.hour}:${date.minute}`).isValid(); };
| @@ -116,7 +116,7 @@ export default function DateTextInput(props: { | |||
| date: `${value ? formatUnfocused(value.getDate(), 0) : ""}`, | |||
| month: `${value ? formatUnfocused(value.getMonth() + 1, 1) : ""}`, | |||
| year: `${value ? formatUnfocused(value.getFullYear(), 2, 4) : ""}`, | |||
| hour: `${value ? formatUnfocused(value.getHours(), 3) : ""}`, | |||
| hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`, | |||
There was a problem hiding this comment.
Hour format implementation needs revision
The current implementation has several issues:
- It forces 12-hour format instead of respecting system preferences as intended
- The modulo operation incorrectly handles midnight (0) and noon (12), both becoming "0"
- Missing AM/PM indicator makes 12-hour format ambiguous
Consider this implementation:
-hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`,
+const is24Hour = Intl.DateTimeFormat(undefined, { hour: 'numeric' }).resolvedOptions().hour12 === false;
+hour: `${value ? formatUnfocused(is24Hour ? value.getHours() : (value.getHours() % 12 || 12), 3) : ""}`,Also, consider adding an AM/PM indicator if using 12-hour format:
const period = value?.getHours() >= 12 ? 'PM' : 'AM';| value.endsWith("/") || | ||
| value.endsWith(" ") || | ||
| value.endsWith(":") || | ||
| value.length > (key === "year" ? 3 : 1) | ||
| ) { | ||
| goToInput(i + 1); | ||
| goToInput((i + 1) % 5); |
There was a problem hiding this comment.
Field navigation logic needs improvement
The current implementation has several issues:
- The modulo operation
(i + 1) % 5assumes all fields are present, but breaks whenallowTimeis false - Missing validation before transitioning could lead to invalid dates
- Automatic transition on delimiters might interfere with manual editing
Consider this implementation:
- value.endsWith("/") ||
- value.endsWith(" ") ||
- value.endsWith(":") ||
- value.length > (key === "year" ? 3 : 1)
- ) {
- goToInput((i + 1) % 5);
+ (value.endsWith("/") && ["date", "month"].includes(key)) ||
+ (value.endsWith(":") && key === "hour") ||
+ value.length > (key === "year" ? 3 : 1)
+ ) {
+ const maxFields = allowTime ? 5 : 3;
+ const nextIndex = (i + 1) % maxFields;
+ // Validate current field before moving
+ const currentValue = parseInt(value);
+ const isValid = !isNaN(currentValue) &&
+ currentValue <= (key === "date" ? 31 :
+ key === "month" ? 12 :
+ key === "year" ? 2999 :
+ key === "hour" ? 23 : 59);
+ if (isValid) {
+ goToInput(nextIndex);
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| value.endsWith("/") || | |
| value.endsWith(" ") || | |
| value.endsWith(":") || | |
| value.length > (key === "year" ? 3 : 1) | |
| ) { | |
| goToInput(i + 1); | |
| goToInput((i + 1) % 5); | |
| (value.endsWith("/") && ["date", "month"].includes(key)) || | |
| (value.endsWith(":") && key === "hour") || | |
| value.length > (key === "year" ? 3 : 1) | |
| ) { | |
| const maxFields = allowTime ? 5 : 3; | |
| const nextIndex = (i + 1) % maxFields; | |
| // Validate current field before moving | |
| const currentValue = parseInt(value); | |
| const isValid = !isNaN(currentValue) && | |
| currentValue <= (key === "date" ? 31 : | |
| key === "month" ? 12 : | |
| key === "year" ? 2999 : | |
| key === "hour" ? 23 : 59); | |
| if (isValid) { | |
| goToInput(nextIndex); | |
| } |
rithviknishad
added
needs testing
needs review
changes required
and removed
needs testing
needs review
labels
|
@ohcnetwork/care-fe-code-reviewers I had made commit with time taking hour as 12 for 12 am or pm, it failed 1 test, but when i reverted it back to 00 it passed all the test cases. I tried to run cypress tests locally, but, in all tests, page was loading till timeout Please guide me on how to proceed further |
Proposed Changes
Closes Improve the Date and Time component in the CARE #8994
Change 1: The text area and selection component for date and time should align with the user’s system time preference.
Change 2: Users should be allowed to enter "01" in the minutes part of the component. Similarly, this behavior should be allowed for all other date and hour parts as well
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes