Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes for DatePicker - DateTimeBlock #444

Merged
merged 3 commits into from
Apr 16, 2024

Conversation

isacoder
Copy link
Collaborator

@isacoder isacoder commented Mar 20, 2024

Description

This PR is a refactor of the DateTimeBlock feature of the Date Picker.
The expected improvements are:

  • 24 hours fix, the issue with the current code base is that allows to have non zero minutes and the callback will return 23 hours. (24:04 -> 23:04)
  • Updated the logic in Date range validation that colors the Time with red for edge cases
  • Rolling minutes (Minutes can increment hour when pressing keyup after 59, or decrement when pressing key down after 00 unless clock is at 00:00 or 23:59)

Considerations on Implementation

In this refactor I used current main 2.0 as base, I will list things that were removed from 1.0 for easier review but mostly removed the logic added from this PR #392

  • Consolidated back Input for Date and Time since the difference between Input and InputValue was the border. Current logic also does not work with Date validation only Time range.

  • Removed 00 logic because I found that updating the display with the date-fns library with the useEffect prevented missing 0

There are currently two PR's open on the DatePicker, I tried to make this PR to cover the requested scenarios, since my changes affects those, I will add the developer to the review this PR.

DatePicker - 2 digit time format in the hours input field
DatePicker minute field roll over

Reviewing/Testing steps

Run Storybook on local and verify DatePicker by adding different values and changing interval option in Time and Date

I made a spreadsheet with the scenarios I used to test this PR feel free to comment on it to add some more if necessary
https://docs.google.com/spreadsheets/d/1POe9uZxKXtLhQFF6DIV-RclUp7T7oXgSeSLlbYmE38g/edit?usp=sharing

Here is an example video

Demo video

@isacoder isacoder added the bug Something isn't working label Mar 20, 2024
@isacoder isacoder self-assigned this Mar 20, 2024
@isacoder isacoder changed the title Feature/fix editable datepicker Fixes for DatePicker - DateTimeBlock Mar 20, 2024
@isacoder isacoder marked this pull request as ready for review March 21, 2024 00:45
Copy link
Collaborator

@atomworks atomworks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good and the interactions feel really smooth in the browser when I tried it. Thanks for your hard work on this!

@isacoder isacoder merged commit 6b68984 into main-v1.x Apr 16, 2024
1 check passed
@isacoder isacoder deleted the feature/fix-editable-datepicker branch April 16, 2024 02:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants