Datepicker enhancement #286
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nes; enhance year selection with dynamic loading and keyboard navigation. Remove decade handling from Calendar and improve UI interactions.
…tion transitions in CalendarRange component
…animation handling for smoother transitions in Calendar and CalendarRange.
…imes for hour, minute, and second adjustments. Update Calendar story to showcase time functionality.
…time item styling in CalendarTimes component for improved visual consistency.
… presets for quick date selection and enhance CalendarTimes component with smooth scrolling for selected time items.
…ut; adjust border styles for improved visual hierarchy and spacing.
…election options for improved user experience.
…eview feature; update Calendar component to support new prop for input display.
…nputs and CalendarTimes to support time selection and day of week display. Update Calendar story to demonstrate new features.
…puts for improved date and time validation, and adjust Calendar story to showcase new features. Refine CalendarTheme styles for better layout consistency.
…e regex checks with date-fns parsing for improved accuracy and reliability. Streamline input handling and ensure consistent formatting for date and time strings.
…ime if already set; streamline logic for determining final date. Remove unused import from CalendarDays component for cleaner code.
…port for past, future, and combined presets in Calendar and CalendarRange components. Update Calendar story to demonstrate new preset functionality and improve user experience with streamlined date options.
… left and right pane dates based on selected range for improved user experience.
…r last and next 60/90 days, as well as various past and future timeframes for improved date selection flexibility.
… usage; implement validation for date changes in hour, minute, and second handlers to prevent invalid date states.
…efactor Calendar and CalendarRange components to streamline props and improve date handling logic. Introduce useCalendar hook for better prop management.
…play; adjust Stack properties for better alignment and overflow handling.
…ion with input preview; enhance Calendar and CalendarRange components to support input preview functionality and improve date handling logic.
… for custom input class names; adjust layout properties for better alignment and remove unnecessary elements for improved UI consistency.
…ne date management based on selected range; ensure correct display of months when only start or end date is set.
…logic for date ranges to ensure correct time inheritance and display for selected dates.
… of time for both single and range selections; implement animations for improved user experience when displaying time options.
…display in the story; refactor date handling logic to improve month display management and ensure smooth scrolling behavior in the time selection component.
…ical order of selected dates across panes; streamline state updates for month and year changes, and improve view update logic to prevent unnecessary re-renders during calendar interactions.
…styling for better user experience; implement custom scrollbar styles and touch scrolling support for improved accessibility and aesthetics.
… change source reference to manage updates from presets and inputs; refactor date handling logic to ensure correct view updates and improve user interaction during date selection.
…d refine animated state handling based on scroll direction; enhance user experience during date selection interactions.
… picker functionality for start and end dates, allowing users to set specific times alongside date selections. Refactor date handling logic to accommodate time updates and improve user experience during range selections.
…e, allowing users to select date ranges with time. Update CalendarRangeTheme to include time settings and modify useCalendar hook to support time picker functionality.
…e management; add active state for time picker and streamline time change logic for better user experience during date range selections.
…lity; rename MultiviewWithTime story for clarity, add input preview support, and implement click outside detection for time picker management to improve user experience during date range selections.
…WithTimeAndInputPreview story; update Calendar and CalendarRange components to align item positioning in the Stack and refine animation properties for improved user experience during time selection.
…Range components; introduce new stories for enhanced user interaction with date and time selections, including OK button functionality for confirming selected values.
…', and 'This Week' buttons for quick date selection; implement OK button functionality for confirming selected dates, improving user interaction and efficiency in date range selections.
… from 'filled' to 'text' for improved visual consistency in date selection interfaces.
…k for time picker functionality; remove redundant onOk definitions from SingleCalendarProps and RangeCalendarProps for cleaner code structure. Additionally, update DateInput story to maintain consistency in formatting.
…rity; update CalendarRange component to enhance date handling for past presets, ensuring correct reference dates and improved month display logic. Adjust 'This Week' preset to start from the current day or the beginning of the day based on time picker availability.
…lection scenarios, including time selection, confirmation with OK button, and custom presets. Refactor DateInput props for better type handling and integrate CalendarRange for improved range selection functionality. Update existing stories for consistency and clarity.
…y, including single date and date range scenarios. Enhance user experience by displaying live previews of selected dates in MM/dd/yyyy format.
…the OK button based on the presence of showTime or onOk prop, enhancing flexibility in date selection interfaces. Additionally, modify DateInput story to include onOk prop for improved functionality.
… functionality to handle date selection confirmation. This improves user interaction by triggering the onOk function with the selected date or date range, ensuring a more responsive experience.
…me and consolidate story exports, update date display formats, and enhance component usage examples. Introduce new story structures for better demonstration of calendar functionalities, including basic, time-related, and preset examples.
…ng default values, focus behavior, and preset options. Refactor existing stories for better organization and clarity, while maintaining input preview functionality and special states like error and disabled. Enhance user experience with comprehensive examples of date selection.
❌ Deploy Preview for reablocks-storybook failed. Why did it fail? →
|
Member
|
@arindampradhan - I was curious why you closed the PR, looks like some good changes we are open to integrating! |
Member
|
@arindampradhan - Check out latest release, this is not supported. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 Feature: Enhanced Calendar Component with Date & Time Selection
This PR introduces a major update to the Calendar and CalendarRange components, adding a robust suite of features for date and time selection, story enhancements, and improved UI/UX handling.
⸻
✅ Summary of Changes
📅 Calendar & CalendarRange
• Refactored layout to support independent left and right panels
• Added time selection and confirmation (onOk callback)
• Introduced preset ranges (e.g., Today, Now, This Week, Past 7 Days)
• Implemented value sync effects for consistent UI updates
• Enhanced time display, scrollbar behavior, and chronological order enforcement
• Improved key management for better animations
🧩 New Components & Enhancements
• CalendarInputs: Input-based date/time handling
• TimeColumn: Improved layout and behavior for time selection
• Enhanced date/time validation logic
• Centralized callback interface (onOk)
📚 Storybook Updates
• New stories:
• MultiviewWithInputPreview
• RangeWithTime
• MultiviewWithTimePresets
• MultiviewWithPastPresets
• Expanded DateInput stories to showcase:
• Input previews
• Full range and time capabilities
• Scenario-specific variations
⸻
💅 UI/UX Improvements
• Polished hover and selection styles
• Added confirmation buttons for better UX
• Enhanced layout and spacing in range and time selectors
⸻
🧪 Testing & Validation
• Manual verification via Storybook stories
• Ensured backward compatibility for all existing props and usages
⸻
Screen.Recording.2025-04-05.at.21.32.58.1.mp4