[Platform] [Date Picker Component] As a user, I want to choose a date or date range, so that I can filter opportunities, projects, ideas, etc. on the Dev Launchers Platform.

[zar92]

Description:

The Date Picker component will allow users to select a specific date or a range of dates to filter data or content within the application. The component should be intuitive, responsive, and accessible, providing a seamless user experience across all supported devices and browsers.

Functionality:

Single Date Selection: Users can select a specific date from a calendar interface. Date Range Selection: Users can select a start and end date to filter results within a specific range. Clear Selection: Users should be able to clear their date or date range selection with a single action. Predefined Date Ranges: Users should have options for quick selection of common date ranges (e.g., "Today," "Last 7 Days," "This Month," "Last Month"). Input Field: Users should be able to manually input dates using a text field, with validation for correct date formats. Responsive Design: The component should be fully responsive and work across different screen sizes, from mobile devices to desktops. Localization: The component should support different date formats and languages, based on user preferences (optional).

Acceptance Criteria:

Single Date Selection: Given the user accesses the date picker, when they select a date from the calendar, then the selected date should be displayed in the input field. The selected date should be reflected in the filtering of data/content immediately upon selection.

Date Range Selection: Given the user selects a start date, when they select an end date, then the date range should be displayed in the input field. The selected date range should be reflected in the filtering of data/content immediately upon selection.

Clear Selection: Given the user has selected a date or date range, when they click on the "Clear" button/icon, then the selection should be cleared, and the filtering should reset.

Predefined Date Ranges: Given the user selects a predefined date range option, when they choose options like "Today" or "Last 7 Days," then the corresponding date(s) should be populated in the input field, and the filtering should update accordingly.

Manual Date Input: Given the user manually inputs a date or date range, when they submit the input, then the component should validate the format and update the filtering accordingly. If the input is in an incorrect format, an error message should be displayed, and the filter should not apply until the input is corrected.

Responsive Design: The date picker should be fully functional and visually consistent across all screen sizes and orientations. On smaller screens, the calendar should be easy to navigate, and the input fields should remain accessible and usable.

Localization Support: The date picker should display dates in the user's preferred format (e.g., MM/DD/YYYY, DD/MM/YYYY). It should also support language localization, updating labels and controls based on the user's language settings.

Additional Notes: The component should integrate with the existing filter logic seamlessly. Ensure the component is accessible, supporting keyboard navigation and screen readers. The component should follow the design guidelines provided by the UI/UX team.

Design Link: https://www.figma.com/design/EwzuhhvTulvFRMvhTD5VAh/DL-Universal-Design-System?node-id=15209-13731&node-type=FRAME

[Enjoy2Live]

@Nouri-Anouar I noticed the buttons by the sides of "July 2024" aren't actually the buttons we have at Atoms/Button

[Nouri-Anouar]

@Enjoy2Live thank you for the heads-up! I left you an example on Figma.

[dbradham]

@Nouri-Anouar @Enjoy2Live I am looking at the thread for the date picker component in Discord and see that Aishwarya posted a use case. Have either of you discussed this further with her or anyone on community development?

[Nouri-Anouar]

@Nouri-Anouar @Enjoy2Live I am looking at the thread for the date picker component in Discord and see that Aishwarya posted a use case. Have either of you discussed this further with her or anyone on community development?

Hello @dbradham, thank you for checking in! Yes, we are communicating with Aishwarya and the Platform team to build this component.

Let me know if you have a use case or if you want to discuss this further.