feat(datepicker): add date range picker #19125
Merged
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
* Adds a date selection model (#17363) * Adds a date selection model * Adds a date selection model * Use MatDateSelectionModel to model the selected value in MatDatepickerInput (#17497) * Make the selection model injectable and add an `overlaps` method (#17766) * Adds a date selection model (#17363) * Adds a date selection model * Adds a date selection model * Add overlaps function to date selection model * Trying to incorporate the new type definition (#17942) * incoporate new type definition * fix test and clean up the types a bit * update api gold * fix some nits * fix lint Co-authored-by: mmalerba <[email protected]> * refactor(datepicker): implement date selection model provider Reworks the datepicker-related directives to move the source of the value into the new datepicker selection provider. Co-authored-by: xlou978 <[email protected]> Co-authored-by: jaguima <[email protected]> Co-authored-by: mmalerba <[email protected]> Co-authored-by: roboshoes <[email protected]> Co-authored-by: goldblatt <[email protected]>
Sets up the UI and most of the boilerplate that we'll need for the input that is associated with a date range picker. Doesn't include any interactions with the datepicker itself yet.
Moves the common logic for a date input into a base class and implements it for the range inputs.
Implements the date range selection model in the individual range inputs.
I had to do some hacky workarounds in order, because I couldn't figure out how to deal with an abstract class that was being passed into a mixin. These changes clean up the workarounds.
Moves some things around to set up the date range picker. Includes: * Moves all of the datepicker logic into a base class so that it can be reused between the single and range selection. * Makes the input being passed into a datepicker generic so that we can strongly type `MatDatepicker` to `MatDatepickerInput` and `MatDateRangePicker` to `MatDateRangeInput`. * Sets up min, max and date filter validation for the date range picker. * Hooks up the date range picker to the date range input. * Makes it so that a generic datepicker can be passed to a datepicker toggle. * Adds a `DateFilterFn` type so we don't have to repeat the signature for the filter function everywhere. Note that while picking a date range somewhat works now, it's still a bit broken. The primary goal of these changes was to have all of components in place and wired up so that we can start working on the UI in follow-up PRs.
Reworks a few things in the calendar and adds the styling for the date range. A couple of notes: * This isn't the final UX of when start/end ranges will be selected. I wanted to have most of the functionality in place before playing around with the UX. * This approach currently has an issue where the range won't go from one month into another properly. The problem is that the date cells store the current day internally. I'll make a follow-up PR that'll address the issue by storing the timestamp instead.
Currently we don't handle date ranges across months, because we store the date cell's value as the date in the current month. These changes add another value that will be used comparisons and which is based on the time since epoch.
Makes a bunch of changes to polish up the behavior of the date range picker. - Makes the range selection logic a bit smarter about when to pick start/end so that it's more intuitive. - Fixes hovering over disabled cells triggering the range selection styles. - Fixes a "changed after checked" error when selecting a range using the keyboard. - Implements validation that the start isn't after the end, and that the end isn't before the start. - Adds the missing ARIA attributes. - Fixes being able to select the placeholders of a disabled range input. - Adds the ability to disable the entire range input. - Fixes the inputs not greying out their values when they're disabled. - Makes the range input a bit smarter about which input to focus on click.
…18630) Adds some extra logic so that the user can abort the current range selection if they press the escape key.
* Makes the range background shorter so that there's a gap when a range spans across multiple rows. This makes it easier to see what's going on. * Fixes the range styles not accounting for RTL layouts.
Adds the ability to render a comparison range in the date range picker. When the comparison overlaps with the primary range, the overlapping dates are shown in a separate "overlap" range.
#18819) Fixes some extra circles showing up when they're not supposed to when hovering over the start of the range or when the starts/ends of ranges are the same. Also clears out a few selectors that aren't necessary anymore.
Sets up unit tests for the `mat-date-range-input` component.
Adds more tests for the date range picker functionality. These cover the logic for displaying and selecting the range, as well as the integration between the range input, range picker and calendar. Also fixes a couple of smaller issues that were revealed while I was writing the tests.
- Removes some methods from the date selection model that were put in place under the assumption that they'd be used, but we never ended up using them. - Moves the selection model out of `core` and into `datepicker`. I decided to do it, because it seems very tightly coupled to the datepicker and I don't see us needing it in other components in the future.
…sign spec (#18936) Our current approach to styling the preview range in the same way as the selected range is discouraged by the Material Design spec and may make it hard in the future if we made it possible to have both a preview and selected range at the same time. These changes align with the spec by using a dashed outline instead.
…ed (#18980) As discussed, adds a provider that allows the consumer to customize how the range is changed after the user has selected a value. For now it only has one method (`selectionFinished`), but the interface should allow us to add more later on.
This is something that I put the code in for in the beginning, but forgot to wire up. The `aria-owns` of the `label` in the `mat-form-field` needs to point to the id of the start input, but it didn't have an id.
Allows for a range to have the same start and end dates.
…19088) Moves some things around so that the preview range can be controlled through the `MatCalendarRangeSelectionStrategy`.
…ay logic (#19111) No longer shows dates on the calendar if the range is invalid. Also moves out some common range logic that was being repeated in multiple places.
crisbeto
added
P2
This comment has been minimized.
This comment has been minimized.
googlebot
added
cla: no
…een months (#19174) Fixes a "changed after checked" error being thrown if the user has an active preview and they move to a different month using the keyboard. This is something that we had a fix for, but after #19088 it has to be moved one component up, because the binding that changes is in a different view.
The check for when pressing escape should clear a range wasn't quite right which meant that pressing escape would clear a completed range. The intention was to only clear the range if the user has a start, but not an end.
…19176) This is something I found while I was writing the live examples. When both the start and end inputs have an initial value bound through `ngModel`, the start resets the end, because the end's value wasn't yet defined at the time the start was assigning its value. These changes fix the issue by treating the entire input as a single unit when it comes to change events.
…19187) Fixes the `dateChange` event being fired before the value is assigned to the native input value.
…ctions The calendar was changed to dispatch its `selectedChange` event for some non-user interactions. These changes restore the old behavior.
In a previous fix I added some changes so that typing in an input counts as typing inside the entire date range input. The problem is that this causes some extra events to be fired which result in the user's typed value being overwritten as they're typing. These changes revert the previous fix and resolve the issue in a different way.
…g on the selected date (#19211) If the user clicks on the selected date, we were emitting null instead of the actual value.
…#19219) There are some projects that expect that the `mat-calendar` doesn't assign the value itself, but only renders it out and emits an event when something is selected. These changes move the date selection logic out into the `MatDatepickerContent`. Also renames the calendar range selection strategy since it doesn't have much to do with the calendar anymore.
…on end input (#19239) Makes it so that pressing backspace on an empty end input moves focus into the start input. This makes the two separate inputs feel a bit more like a single input.
…9170) Sets up some live examples and adds docs for the date range picker.
andrewseguin
added
cla: yes
|
A Googler has manually verified that the CLAs look good. (Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.) ℹ️ Googlers: Go here for more info. |
|
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the ℹ️ Googlers: Go here for more info. |
googlebot
added
cla: no
andrewseguin
added
target: major
|
A Googler has manually verified that the CLAs look good. (Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.) ℹ️ Googlers: Go here for more info. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Adds the ability to pick date ranges through the
mat-date-range-pickercomponent.