feat(DatePicker): select range of dates
alaawerfelli opened this issue · comments
Hello,
it's possible to set date range in date picker (have the ability to choose startDate and endDate and get all dates between startDate and endDate).
Hi.
As it is write Here
This is a feature that will come "Support for selecting and displaying date ranges"
+1 Date range picker is also supported by ng-bootstrap. Example of which is available here: https://ng-bootstrap.github.io/#/components/datepicker/examples
Than, I understand that currently is not supported, no?
http://ej2.syncfusion.com/demos/#/material/daterangepicker/minmax.html this looks decent
I think this is quite important for many scenarios (we will use Material for enterprise applications and we sure need it). @alaawerfelli said that it should return all the dates between startDate and endDate, but I think that the component should just return both dates, as the dates could be then calculated if needed. The design would be easier as you could use startDate / endDate as input / output parameters.
You can use [min] [max] attributes with your matDatePicker.
@FabienInan [min] [max] attributes are about date validation, not related to date range selection.
Is there a timeframe for the release of this feature? (or any place where we can see what are the things to come in the next couple of months?)
(or any place where we can see what are the things to come in the next couple of months?)
readme
I'm trying to do date range picker, and I also want to contribute it. How it is better - another component(s) or write code to existing?
What do you think, this styles is ok?
@SaturnTeam : It looks good!! I looked at the Material Design specification, but they don't say anything about selection of ranges. Your design looks very material-like! :-)
@SaturnTeam That looks awesome, care to share the code? Thanks!
@gerardosabetta Code not ready yet
UI for selected range between one month
second primary-colored circle - it is :hover
Material team, How do you think better - propagate values via existing @Output() selectedChange: D or create @Output() dateRangeChange: MatDatePickerRangeValue<D> ?
@SaturnTeam Can you show me project demo online? Please, I need your help?
@enqminh What do you want from it? Code done only 30%
@SaturnTeam it's not easy to help without seeing how you plan to build the component.
Will there be 2 inputs for the begin and the end of the range ? Will you have 2 outputs for each of them ?
I just wanna datepicker form... to.
@lihanyu23 Ok, I got it. I will commit tomorrow to my repo to show. I'm going to use one input and add 1-3 additional variables to MatDatepicker and it's childs. I started to create another component, but then I understand that 90% of code is the same with MatDatePicker, and I decided to update MatDatepicker.
About selecting and showing days through MatCalendar - no any problem.
The difficulty in displaying value in <input>. Examples, how I think to show them (depends on DateAdapter)
01/31/2017 — 02/18/2017 (or 01/31 — 02/18/2017)
Later to do these displaying
nov 2017 (for 11/01/2017 — 11/31/2017)
jul 2017 — dec 2017 (for 07/01/2017 — 12/12/2017)
And of course string parser will separate string (by — or -) to convert it to two dates (begin and end). Also I don't forget about sauch date formats as 01-01-2001
@SaturnTeam Here is my ideas/mockup based on the styles of the latest datepicker.
Pattern with "filling" like this should work better (especially for ranges greater than 1 month), because:
- starting and ending points are always rounded and easy to notice
- all days between are just filled with background color so they looks less noisy as if it was with circles.
For styling I used
background-color: #e6f3ff;
and for corner points I used this trick
border-radius: 100% 0 0 100%;
@Den-dp I wanted to do the same too. I got some problem, but now I can't understand what it was. I'll try tomorrow. I didn't find your color in material pallete https://material.io/guidelines/style/color.html#color-color-palette I will look something similar
@SaturnTeam good catch! Any color from 50-200 should fit perfectly
@SaturnTeam try to use 50 or 100 from the palette. Also I like @Den-dp's idea.
The color should depend on the current theme. Not everyone will use blue.
From the material design page: https://material.io/guidelines/style/color.html#color-color-system
A primary color is the color displayed most frequently across your app’s screens and components. It can also be used to accent elements, if you don’t have a secondary color.
To create contrast between elements, you can use lighter or darker tones of your primary color.
I don't know if the Angular material implementation defines something like primary_color and primary_color_light for the themes, but we are looking for a color to specify the "from" and "to" dates and a lighter version of this color to show the selected dates.
@lihanyu23 I commited to my repo https://github.com/SaturnTeam/material2 . Serving is the same as usual material dev. Range mode enabled on http://localhost:4200/datepicker "Result"
@SaturnTeam haha, but why? 😜 Good work! ✨ The first one looks great for me!
Also here I tried to use a lighter 50 color and it looks even better
Personally, I do like the mockup without border-radius on each day, because the shape helps the eye to distinguish important information (where are the starting and ending points of the range) and f.e. expectations about whether or not the last day in calendar (NOV 30) is the end of the range is more clear.
Also for reference flights.google uses filled background in their calendar too
Ohh, just look how cute these neighborhood dates.
Code is ready (see my repo). Writing tests and documentation in progress. Also I applied last changes with multi year view.
(keyboard not working temporally)
I created from my code standalone package. Installation: yarn add saturn-datepicker or npm install saturn-datepicker. Disscussion and info https://github.com/SaturnTeam/saturn-datepicker
Anyone knows about a11y with range selection?
Our requirements (searching for documents within certain date ranges) dictate that the start and/or end dates may be empty if the user chooses. That way the date range can be used to mean "after a specific date" when only the start date is chosen, "before a specific date" when only the end date is chosen, "between two dates" when both are chosen, or "any date" when neither date is chosen.
This is something that most third-party implementations can't do, but that would be especially useful particularly for search interfaces! It would be greatly appreciated if this use case would be taken into account. :)
@mischkl Do you have any ideas how to do it through UI?
@mischkl These are exactly our requirements as well. The typical scenario for a range date picker is to use it for filtering data. Of course, there is another use case like "dates for your hotel booking" were you need fixed limits, but for filtering it is quite usual to have an "open" limit.
Do you have any ideas how to do it through UI?
@SaturnTeam My guess is to have two modes : "start date" and "end date". And a "validate" button.
When opening the date range picker :
- the mode is set to "start date"
- when you select a date the mode switch to "end date"
- OR you can manually switch to "end date" without entering any start date via two buttons (
select start dateandselect end dateat the top, like the exemple below)
Here is an exemple from third party Ionic 3 Date Picker :
The exemple is just for the switch button. It misses the validate button.
We should also have an option to validate via a backdrop dismiss.
Here is a mockup I made of what such a date picker control could look like. It would not only support empty start/end dates but also keyboard-only data entry, which I believe is another important goal that the current date picker already fulfills.
Once the user clicks on a start date, the focus automatically switches to the end date, as in most 3rd party implementations. In case the user wants to leave the "From" date blank, they would simply click or tab to the "To" field manually. The cursor and field highlighting should be enough so they know what they are entering at any given time.
Additionally the color-coding of the input fields helps to form a mental map between what is entered above and what is selected on the calendar below - however it remains to be seen whether this is able to mesh seamlessly with the Material Design guidelines.
In keeping with other material controls there is no extra "validate" button; rather the validation would occur on tab / loss of focus. As a general rule it should not be possible to click on an end date that occurs before a start date.
Additionally there is the problem of how to show the start date and end date on the same day. For this case the color could be a blend of the start/end colors, or perhaps an overlapping venn-diagram-esque set of circles.
Whether the start and/or end date is allowed to be left blank can of course be made configurable, in order to support classic "hotel booking" use cases as well as search filtering use cases.
@mmalerba for discussion above ^
+1 any news?
@SaturnTeam Apologies for the slow response. Your implementation appears to line up pretty well with what I envisioned for range selection. Would you like to have a quick meeting to discuss what we need to do to move it into the main repo?
+1
@SaturnTeam any news on that?
@Carniatto I'm working with mmalerba on range date picker. It is slow due to different timezones, my work and what mmalerba want.
Temporally you can use my datepicker.
In the demo stackblitz you cant drag to select and it also auto commits without first showing what was selected. I got a bit surprised. Perhaps a draggable selection would make that easier. Also a double month view would make it more clear IMO.
Great work though,
I think I need to announce progress status this feature. It's temporary frozen #10489 (comment)
But anyone can use my datepicker for a time. I'm trying to maintain code as close to original code as possible
@mmalerba you're probably busy with ng-conf but I think the solution shouldn't be complicated.
Trying to force the input to show a range with masking and parsing is additional work we should avoid...
We have a working input that knows how to handle a date and sync it to/from a datapicker, so let's use 2!
something like this:
<mat-form-field>
<input matInput placeholder="Choose a date" [matDatepicker]="resultPicker">
<mat-datepicker #resultPicker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepickerRangeEnd]="resultPicker">
<mat-datepicker-toggle matSuffix [for]="resultPicker"></mat-datepicker-toggle>
</mat-form-field>Which looks something like this:
The use can define it's own separator in the middle, remove gap, create gaps whatever.
input[matDatepickerRangeEnd] is a directive similar to input[matDatepicker] but it will register an range end input...
min/max etc will be taken from the first input only
There are some changes to MatDatepicker, especially handling the new range end input element, new selection events for it etc... and some logic to handle selections / value changes.
e.g when a user is in range mode, if he clicks on a date we don't close the popup/dialog if it's the first selection, we will close on the 2nd...
And of course, internal changes in the month view to show range of selection and 2 selected dates.
I'v done this by extending the base classes and adding functionality and it works without much work. Because I use the same input directive the logic for parsing and handling changes is the same, I just save it in a different variable (range end...)
This design might also help with implementing dual datapicker range selection, like usually seen in airline scheduling sites...
I would be more then happy to quickly push this with a PR, this approach solves all the issues you mentioned in #10489 (comment) because it uses the same logic for range and non range pickers.
@mmalerba
This is the implementation using inheritance: StackBlitz source + demo
I'll point the obvious, 95% of the code is due to inheritance boilerplate in angular templates and component metadata in derived components. Some boilerplates is due to extensive use of private modifiers and not protected.
I estimate the entire change is ~75-85 lines of code.
From the above, the majority goes to TS code in the components.
SCSS changes are minimal, around ~8 LOC.
HTML changes are also minimal, ~10 LOC.
Will happily post a PR for this.
You'r comments in #10489 (comment) are taken care of because it uses the same logic the already exist to handle dates.
The only thing to take care of is a keyboard input of invalid date range (e.g. end date < start date)
@shlomiassaf I do like the direction that's going, but it's strange that you have two different form-fields that pretend to be one. Something we could do instead would be to wrap then in another component/directive that acts as a MatFormFieldControl. I imagine the DOM would look something like this:
<mat-form-field>
<mat-date-range [matDatepicker]="picker" [formControl]="range">
<input matStartDate>
<input matEndDate>
</mat-date-range>
<mat-datepicker #picker><mat-datepicker>
</mat-form-field>@mmalerba I agree, my implementation was just to demonstrate the idea and that it's possible.
I'm working with this solution right now, it does require some work to tame 2 MatFormField s...
Your solution sound good but now we need to think of forms integration more carefully.
What do you mean with [formControl]="range", it looks like FormGroup to me, since we have 2 inputs...
If we use FormControl it will require us to use transformation functions from 2 date inputs into 1 text and vice versa.
I know that MatFormField is limited to 1 control, so its a problem...
I was imagining it being an object:
class DateRange<D> {
start: D;
end: D;
}The mat-date-range would coordinate with the child inputs to keep this in sync.
Btw, today I found that flights.google.com recently got an update which kind of use similar ideas from UI point of view. Just happy, that we are thinking in "Material"-way. 😉
@brazilia28 See https://github.com/SaturnTeam/saturn-datepicker . your implementation also doesn't support input from keyboard without datepicker
Wow, so happy to see this. I need both date, date range and day of week. Clicking on a MTWTF should select all the corresponding dates for that day of week. Return of an array of dates (allowing specific deselection) and an array of days of week would sure float my boat :) Thanks
Google Analytics also has a Material Design Datepicker. We need this please!!
What I don't understand if there is a million developers out there supposedly,... why are there less than a dozen of us talking about this fundamental capability ???
Hi guys, could you please share a possible release date for this feature with us? Thanks 🔢
+1 for this feature request. Massive gap in Angular Material's input functionality. Date range picker is pretty standard.
Hey guys, I'm curios what the current state of this feature is?
@TobiasMalikowski I gave up on this and wrote one from scratch following this youtube tutorial:
https://www.youtube.com/watch?v=ovamx9ePIuE
It was actually super easy and is way more powerful than a material component (in terms of customising its functionality)
@botoxparty Thanks for your link. I've looked into this and saved it as a fallback solution.
However I still hope that the guys working on the Material date picker will finish it.
This is a essential feature when working with dates, so I hope this gets finished in the near future.
Anyway would be nice to hear from @SaturnTeam and @mmalerba :)
@TobiasMalikowski I already have a package based on material source code https://www.npmjs.com/package/saturn-datepicker
It seems like refactoring of input value as I discussed and tried to implement with @mmalerba some months ago
I'm working with a couple folks at Google to implement a similar solution to what I discussed with @SaturnTeam I'll related add issues and PRs here: https://github.com/angular/material2/projects/23 (Don't trust the completion percent though, I haven't added issues for all of the tasks that need to be done).
@mmalerba Is there any room to jump in and help with this effort? I'm looking to use this once it is released, and I would love to help push that effort forward.
@Trendy There are currently two people working on it and I'm reluctant to add more so that coordinating between us doesn't become more difficult. I'll let you know if a good place to contribute to this comes up
It's not completed yet, I just haven't added a full list of tasks to be completed
Got a date range to work with max and min year variables, could probably work with month and day ranges.
minDate = new Date(this.minYear(), 0, 1);
maxDate = new Date(this.maxYear(), 0, 1);
minYear() { return new Date().getFullYear() - 100; }
maxYear() { return new Date().getFullYear() - 18; }
@mmalerba please do you have a date on which the project will be completed and released?
Any update please?
翘首以盼
Looking forward
any news ?
Just use https://www.npmjs.com/package/saturn-datepicker for a while
@botoxparty why it was a desaster ? can you explain ?
We are using Saturn datepicker in a project and it is very ok. Can definetely recommend it.
I'm also using saturn-datepicker, it's based on a clone of material datepicker.
Till now I don't really have any issue with it.
Any update on inclusion of date range in core Angular Material?
https://github.com/angular/material2/tree/date-range
Well, this is the update. I really hope it's coming soon. @mmalerba Is it ready enough for you to slap a release version on this issue?
I don't work here, but the branch shows active development.
We're hoping to have a refactor in for 8.0 that switches the mat-datepicker and related components to use a selection model under the hood. This would allow us to add the date range picker in a later minor release
Is there any update ?
any update regarding date range picker?
the angular materials team is working together with the angular core team to launch the ivy compiler, do not expect any new feature until the ivy be released
any update on this feature?
Just wanted to give a quick update on this:
First, I want to give a huge thank you to @MathiasPaumgarten who has been working on this part-time for quite a while. This is a huge undertaking and Mathias has been doing some awesome work.
So the current state is that it's still in progress, but its slow going. This feature depends on a huge refactor of one of our most complex components. It's taking some time to make sure we get it right and don't break existing users.
The plan is to switch from having all of the sub-components manage their selected state through intercommunication with each other, to coordinating it all through a selection model object. Different selection models will support either single date selection or range date selection. The selection model refactor is close to being ready, the code can be found here: https://github.com/angular/components/tree/date-selection-model.
Meanwhile we have started a new branch that will contain both the selection model changes, plus additional components and UI to deal with selecting ranges of dates. That code will live here (currently it's just the selection model changes): https://github.com/angular/components/tree/date-range.
Hi mmalerba ,
when this feature get release for version 7.3.2 , & how can I adopt in project till release.
Any news? 👀 🙄
@Pijuli Still in review. Sorry that this is taking longer than expected.
Hi, I need a Rangepicker with 2 calendar side by side.
I downloaded the project and I made a workaround to do it.
Exist the possibility of add this feature here?
@rvoltolini You can make a pr in my repo. So, people would be able to you it.
is this still in progress? wondering if we should start looking for a third party solution.
It would be a very nice feature, please speed up the process!
@mmalerba / @roboshoes Any news?
There's nothing new to report here. Nobody on the core team currently has time to work on this, but we are still working with some contributors who are able to work on it part time