fix(datepicker): datePicker now supports formatting of date #1314
Conversation
|
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent changes enhance the Datepicker component in a UI library, focusing on date formatting and localization using Changes
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (2)
Files skipped from review as they are similar to previous changes (1)
Additional comments not posted (2)
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
packages/ui/package.jsonis excluded by:!**/*.json
Files selected for processing (7)
- apps/web/content/docs/components/datepicker.mdx (1 hunks)
- apps/web/examples/datepicker/datepicker.format.tsx (1 hunks)
- apps/web/examples/datepicker/index.ts (1 hunks)
- packages/ui/src/components/Datepicker/Datepicker.spec.tsx (5 hunks)
- packages/ui/src/components/Datepicker/Datepicker.stories.tsx (1 hunks)
- packages/ui/src/components/Datepicker/Datepicker.tsx (4 hunks)
- packages/ui/src/components/Datepicker/helpers.ts (3 hunks)
Additional comments: 5
apps/web/examples/datepicker/index.ts (1)
- 2-2: The addition of the
formatexport fromdatepicker.formatis correctly implemented.apps/web/examples/datepicker/datepicker.format.tsx (1)
- 1-42: The new example file
datepicker.format.tsxcorrectly demonstrates the usage of theinputFormatprop with theDatepickercomponent. The structure and export of the example are consistent with the project's standards.packages/ui/src/components/Datepicker/Datepicker.stories.tsx (1)
- 64-77: The addition of the
FormattedDatestory inDatepicker.stories.tsxcorrectly showcases the newinputFormatprop with a sample format. This enhances the documentation and provides a practical example of the new feature.apps/web/content/docs/components/datepicker.mdx (1)
- 22-29: The addition of the documentation section for setting the date format using the
inputFormatprop is clear and informative. The note on format conventions is particularly helpful for guiding users in correctly specifying date formats.packages/ui/src/components/Datepicker/Datepicker.tsx (1)
- 100-100: The addition of the
inputFormatproperty to theDatepickerPropsinterface and its usage inDatepickerRenderare correctly implemented. The default value and its application in date formatting calls enhance the component's flexibility and align with the PR objectives.Also applies to: 121-121, 206-206, 209-209, 277-277
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
packages/ui/package.jsonis excluded by:!**/*.json
Files selected for processing (5)
- apps/web/examples/datepicker/datepicker.format.tsx (1 hunks)
- packages/ui/src/components/Datepicker/Datepicker.spec.tsx (5 hunks)
- packages/ui/src/components/Datepicker/Datepicker.tsx (3 hunks)
- packages/ui/src/components/Datepicker/helpers.spec.tsx (1 hunks)
- packages/ui/src/components/Datepicker/helpers.ts (3 hunks)
Files skipped from review as they are similar to previous changes (4)
- apps/web/examples/datepicker/datepicker.format.tsx
- packages/ui/src/components/Datepicker/Datepicker.spec.tsx
- packages/ui/src/components/Datepicker/Datepicker.tsx
- packages/ui/src/components/Datepicker/helpers.spec.tsx
Additional comments: 1
packages/ui/src/components/Datepicker/helpers.ts (1)
- 1-1: The import of
DateFNSFormatfrom 'date-fns' is correctly added to support date formatting functionality.
|
btw, what code editor are u using @dhavalveera ? It seems to me that u are not formatting the code on-save, or at all. |
I'm using VSCode, and when I do save ( |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (9)
- apps/web/content/docs/components/datepicker.mdx (1 hunks)
- apps/web/examples/datepicker/datepicker.format.tsx (1 hunks)
- apps/web/examples/datepicker/datepicker.localization.tsx (1 hunks)
- apps/web/examples/datepicker/index.ts (1 hunks)
- packages/ui/src/components/Datepicker/Datepicker.spec.tsx (5 hunks)
- packages/ui/src/components/Datepicker/Datepicker.stories.tsx (1 hunks)
- packages/ui/src/components/Datepicker/Datepicker.tsx (4 hunks)
- packages/ui/src/components/Datepicker/helpers.spec.tsx (1 hunks)
- packages/ui/src/components/Datepicker/helpers.ts (3 hunks)
Files skipped from review as they are similar to previous changes (5)
- apps/web/examples/datepicker/datepicker.format.tsx
- apps/web/examples/datepicker/index.ts
- packages/ui/src/components/Datepicker/Datepicker.spec.tsx
- packages/ui/src/components/Datepicker/Datepicker.stories.tsx
- packages/ui/src/components/Datepicker/Datepicker.tsx
Additional comments: 11
apps/web/examples/datepicker/datepicker.localization.tsx (3)
- 10-10: The update to the
languageattribute and label attributes for the Datepicker component enhances consistency and ensures compatibility with thedate-fnspackage.- 18-18: The consistency in updating the
languageattribute and label attributes across different parts of the file ensures uniformity in the component's usage.- 23-23: The consistency in updating the
languageattribute and label attributes across different parts of the file ensures uniformity in the component's usage.apps/web/content/docs/components/datepicker.mdx (2)
- 22-30: The addition of a section for setting the date format using the
inputFormatprop, along with notes on date format conventions and the reliance ondate-fns, is crucial for informing users about the new formatting capabilities of the Datepicker component.- 38-38: The note on the reliance of the
Datepickercomponent ondate-fnsfor localization, and guiding users to refer to available localizations fromdate-fns, is important for correctly utilizing the localization feature.packages/ui/src/components/Datepicker/helpers.ts (3)
- 1-2: The addition of imports for
DateFNSFormatandDateFNSLocaleis necessary for enabling the new date formatting feature, aligning with the objective of providing customizable date formatting capabilities.- 4-5: Defining a type for available locales enhances type safety and clarity in the code, supporting the new date formatting feature by specifying the types of locales that can be used.
- 105-116: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [108-127]
The modification of the
getFormattedDatefunction to include adateFormatparameter and utilizeDateFNSFormatfor date formatting aligns with best practices for localization support. The approach to determining the locale ensures that the correct locale object is used for formatting.packages/ui/src/components/Datepicker/helpers.spec.tsx (3)
- 157-157: The update to include an additional argument for the date format string in the
getFormattedDatefunction call is necessary for testing the new formatting capabilities. The specified format matches the expected output, ensuring the test correctly assesses the functionality.- 164-164: The update to include an additional argument for the date format string in the
getFormattedDatefunction call, along with specified options, is necessary for testing the new formatting capabilities. The approach is consistent with the objective of testing the new feature.- 170-170: The update to test the localization feature by specifying a different language code is important for ensuring the feature works as expected across different locales. This is crucial for testing the localization aspect of the new feature.
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (1)
- packages/ui/package.json (1 hunks)
Additional Context Used
Additional comments not posted (1)
packages/ui/package.json (1)
80-80: The addition ofdate-fnsversion3.6.0to the dependencies is correctly implemented and aligns with the PR's objectives. Using a fixed version ensures stability but consider the trade-offs between fixed versions and version ranges for future maintenance.
|
@dhavalveera could you please rebase it with main? I want to get this one approved. :) |
@rluders --- this conflicts, can't be done from my end, as I don't have the write access to this repository. |
dhavalveera
force-pushed
the
fix/date-format
branch
from
73e6290
to
efb71aa
Compare
|
@rluders --- it seems like I need to modify the |
🛠️ Enhancement: Added Date Formatting Support to DatePicker
This PR introduces date formatting support to the DatePicker component by leveraging the
date-fnspackage. Users can now customize date formats such asdd-MMM-yyyyordd MMM yyyyaccording to their preferences.outputs/examples:
dd-MMM-yyyy // output => 11-Mar-2024
dd MMM yyyy // output => 11 Mar 2024
dd-MM-yyyyy // output => 11-03-2024
Summary by CodeRabbit
New Features
Enhancements
Documentation
Tests
Chores