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

enhancement(Datepicker) date range #549

Merged
merged 9 commits into from
Dec 17, 2024

Conversation

gselderslaghs
Copy link
Member

@gselderslaghs gselderslaghs commented Dec 12, 2024

Proposed changes

Implemented date range select functionality as per pull-request #360

  • This functionality adds an end date field when option dateRange: true is provided
  • Implemented calendar modal functionality to select an end date
  • Implemented end field input change handling and modifiers to adjust the year, month and day selectors if a click or enter keypress interaction is executed
  • Daterange classes added for in-range days
    styling of the in-range items needs to be addressed, propose create this in a new issue since the global layout of the datepicker is outdated: currently still follows the M2 guidelines

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

  • I have read the CONTRIBUTING document.
  • My commit messages follows the conventional commit format
  • My change requires a change to the documentation, and updated it accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@gselderslaghs gselderslaghs marked this pull request as ready for review December 13, 2024 14:34
@gselderslaghs gselderslaghs changed the title Datepicker date range enhancement(Datepicker) date range Dec 14, 2024
wuda-io
wuda-io previously approved these changes Dec 16, 2024
@gselderslaghs gselderslaghs dismissed wuda-io’s stale review December 16, 2024 14:22

The merge-base changed after approval.

@wuda-io
Copy link
Member

wuda-io commented Dec 16, 2024

I will merge it in first, and then change the modal in #556 because date and timepicker depend on the modal component. We should change it to the Popover API since it is widely available in browsers now. https://caniuse.com/?search=popover

wuda-io
wuda-io previously approved these changes Dec 16, 2024
@gselderslaghs gselderslaghs dismissed wuda-io’s stale review December 16, 2024 14:55

The merge-base changed after approval.

wuda-io
wuda-io previously approved these changes Dec 16, 2024
@gselderslaghs gselderslaghs marked this pull request as draft December 16, 2024 14:57
@gselderslaghs
Copy link
Member Author

As Ive been working on the #360 multi date select, I've found some additional issue's that I'm about to commit soon regarding date range select

…day or multi day date selection; Implemented setDateFromInput for logical navigation within the calendar by mouse/keypress interaction on input change, fixes issue where calendar only navigated to latest changed field; Refactored handleCalendarClick, split up single date click and date range click for the sake of code readability and simplicity; Updated JSDoc, removed unused parameter; Deprecated _setToStartOfDay (function has no effect); materializecss#360
@gselderslaghs
Copy link
Member Author

Ok, implemented additional refactoring based on my previous issues concerns, think this PR is ready for review

Changelog as of the latest commits

  • Implemented multiple global parameter for conditional check on single day or multi day date selection, used in calendar day click event handler to decide if it's a single day click on the calendar
  • Refactored handleCalendarClick, split up single date click and date range click for the sake of code readability and simplicity
  • Implemented setDateFromInput for logical navigation within the calendar by mouse/keypress interaction on input change, fixes issue where calendar only navigated to latest changed field previously, eg. when start and end date where set by user input, clicking or keypressing on any of both fields resulted in only navigating to the latest changed field
  • Updated JSDoc, removed unused parameter
  • Deprecated _setToStartOfDay (function has no effect)

@gselderslaghs gselderslaghs marked this pull request as ready for review December 16, 2024 15:35
wuda-io
wuda-io previously approved these changes Dec 17, 2024
Copy link
Member

@wuda-io wuda-io left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@gselderslaghs gselderslaghs dismissed wuda-io’s stale review December 17, 2024 12:03

The merge-base changed after approval.

wuda-io
wuda-io previously approved these changes Dec 17, 2024
@gselderslaghs gselderslaghs dismissed wuda-io’s stale review December 17, 2024 12:09

The merge-base changed after approval.

@wuda-io wuda-io merged commit 8e59a9d into materializecss:v2-dev Dec 17, 2024
1 check failed
@gselderslaghs gselderslaghs mentioned this pull request Dec 19, 2024
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants