Components: feat(DatePicker): select range of dates

[alaawerfelli]

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).

[ss-bb]

Hi.
As it is write Here
This is a feature that will come "Support for selecting and displaying date ranges"

[shyamal890]

+1 Date range picker is also supported by ng-bootstrap. Example of which is available here: https://ng-bootstrap.github.io/#/components/datepicker/examples

[raugaral]

Than, I understand that currently is not supported, no?

[fxck]

http://ej2.syncfusion.com/demos/#/material/daterangepicker/minmax.html this looks decent

[RaulRG]

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.

[FabienInan]

You can use [min] [max] attributes with your matDatePicker.

[hanyu-natsu]

@FabienInan [min] [max] attributes are about date validation, not related to date range selection.

[pyritewolf]

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?)

[fxck]

(or any place where we can see what are the things to come in the next couple of months?)

readme

[SaturnTeam]

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?

[SaturnTeam]

What do you think, this styles is ok?

[RaulRG]

@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! :-)

[ghost]

@SaturnTeam That looks awesome, care to share the code? Thanks!

[SaturnTeam]

@GerardoSabetta Code not ready yet

[SaturnTeam]

UI for selected range between one month
second primary-colored circle - it is :hover

[SaturnTeam]

Material team, How do you think better - propagate values via existing @Output() selectedChange: D or create @Output() dateRangeChange: MatDatePickerRangeValue<D> ?

[varnguyen]

@SaturnTeam Can you show me project demo online? Please, I need your help?

[SaturnTeam]

@enqminh What do you want from it? Code done only 30%

[hanyu-natsu]

@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 ?

[varnguyen]

I just wanna datepicker form... to.

[SaturnTeam]

@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

[Den-dp]

@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%;

[SaturnTeam]

@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

[Den-dp]

@SaturnTeam good catch! Any color from 50-200 should fit perfectly

[hanyu-natsu]

@SaturnTeam try to use 50 or 100 from the palette. Also I like @Den-dp's idea.

[RaulRG]

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.

[RaulRG]

@Den-dp I like your design. I agree with you that it looks less noisy => better

[SaturnTeam]

@Den-dp @RaulRG @lihanyu23 As you can see, it is not very great idea.
without border-radius

with border-radius

[SaturnTeam]

@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"

[Den-dp]

@SaturnTeam haha, but why? :stuck_out_tongue_winking_eye: Good work! :sparkles: 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

[SaturnTeam]

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)

[SaturnTeam]

@juliemr @mmalerba Proposal https://docs.google.com/document/d/14S3BvSm9o8_7VKwJU0ek59V7Cm4Yjt6OOoMj_lpfYZ0/edit?usp=sharing

[SaturnTeam]

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

[SaturnTeam]

Anyone knows about a11y with range selection?

[mischkl]

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. :)

[SaturnTeam]

@mischkl Do you have any ideas how to do it through UI?

[RaulRG]

@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.

[ThomasKientz]

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 date and select end date at 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.

[mischkl]

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.

[jelbourn]

@mmalerba for discussion above ^

[Carniatto]

+1 any news?

[mmalerba]

@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?

[Carniatto]

+1
@SaturnTeam any news on that?

[SaturnTeam]

@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.

[AllNamesRTaken]

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,

[SaturnTeam]

I think I need to announce progress status this feature. It's temporary frozen https://github.com/angular/material2/pull/10489#issuecomment-375034796
But anyone can use my datepicker for a time. I'm trying to maintain code as close to original code as possible

[shlomiassaf]

@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.

[shlomiassaf]

@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)

[mmalerba]

@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>

[shlomiassaf]

@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...

[mmalerba]

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.

[shlomiassaf]

Funny, that's exactly what I did just with 2 form fields and sync outside

Sent from my iPhone

On 1 May 2018, at 19:50, mmalerba [e-mail] wrote:

I was imagining it being an object:

class DateRange {
start: D;
end: D;
}
The mat-date-range would coordinate with the child inputs to keep this in sync.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Den-dp]

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. :wink:

[SaturnTeam]

@brazilia28 See https://github.com/SaturnTeam/saturn-datepicker . your implementation also doesn't support input from keyboard without datepicker

[DanPride]

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

[SnakeME]

Google Analytics also has a Material Design Datepicker. We need this please!!

[DanPride]

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 ???

[yuliankarapetkov]

Hi guys, could you please share a possible release date for this feature with us? Thanks 🔢

[botoxparty]

+1 for this feature request. Massive gap in Angular Material's input functionality. Date range picker is pretty standard.

[DanPride]

I am just now diving into typescript.
I am wondering how much it would take to edit the existing date picker.
I have decades of experience
Any Idea how big a task this would be for multiple selection?

Dan Pride
1-605-777-0491
1-360-850-9322 (Mobile)
http://danielpride.com
www.linkedin.com/in/danielpride/
http://archaeolibrary.com/
http://headlessuber.com
http://kingsolomonsgate.com
http://solomonschariot.com

On Thu, Jul 19, 2018 at 12:59 AM, Yulian Karapetkov <
[email protected]> wrote:

Hi guys, could you please share a possible release date for this feature
with us? Thanks 🔢

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/4763#issuecomment-406189723,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACUUNu6fEgmpL5KNuzuoAtC6QlJ2qOarks5uIDxygaJpZM4Nkx8N
.

[TobiasMalikowski]

Hey guys, I'm curios what the current state of this feature is?

[botoxparty]

@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)

[TobiasMalikowski]

@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 :)

[SaturnTeam]

@TobiasMalikowski I already have a package based on material source code https://www.npmjs.com/package/saturn-datepicker

[fxck]

There's this https://github.com/angular/material2/pull/13041 whatever it means (the person seems to be working at Google)..

[SaturnTeam]

It seems like refactoring of input value as I discussed and tried to implement with @mmalerba some months ago

[mmalerba]

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).

[Trendy]

@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.

[mmalerba]

@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

[kendallcarey]

@mmalerba https://github.com/angular/material2/pull/13041 it looks like this project is completed? I would also like to use this once its released

[mmalerba]

It's not completed yet, I just haven't added a full list of tasks to be completed

[jStoutAssure]

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; }

[sancaruso]

@mmalerba please do you have a date on which the project will be completed and released?

[keserwan]

Any update please?

[liuganchen]

翘首以盼
Looking forward

[Githamza]

any news ?

[SaturnTeam]

Just use https://www.npmjs.com/package/saturn-datepicker for a while

[botoxparty]

Last time I used Saturn datepicker it was a disaster.

Honestly just code your own datepicker I dont know why people are waiting
for this to happen.

On Tue, 11 Dec. 2018, 3:51 am SaturnTeam <[email protected] wrote:

Just use https://www.npmjs.com/package/saturn-datepicker for a while

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/4763#issuecomment-445886800,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXcP5GRzNYbSUzfwbvtouh0uWSUxzIwOks5u3pElgaJpZM4Nkx8N
.

[Githamza]

@botoxparty why it was a desaster ? can you explain ?

[margielm]

We are using Saturn datepicker in a project and it is very ok. Can definetely recommend it.

[hanyu-natsu]

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.

[l3ender]

Any update on inclusion of date range in core Angular Material?

[ghost]

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?

[l3ender]

Any update? @doom777 @mmalerba

[ghost]

I don't work here, but the branch shows active development.

[mmalerba]

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

[mjdiaz25]

Is there any update ?

[imransilvake]

any update regarding date range picker?

[Rodrigo54]

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

[JamesHearts]

any update on this feature?

[mmalerba]

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.

[shahbaazchaviwale]

Hi mmalerba ,

when this feature get release for version 7.3.2 , & how can I adopt in project till release.

[Pijuli]

Any news? 👀 🙄

[roboshoes]

@Pijuli Still in review. Sorry that this is taking longer than expected.

[rvoltolini]

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?

[SaturnTeam]

@rvoltolini You can make a pr in my repo. So, people would be able to you it.

[clement911]

is this still in progress? wondering if we should start looking for a third party solution.

[azollai]

It would be a very nice feature, please speed up the process!

[absalonv]

@mmalerba / @roboshoes Any news?

[mmalerba]

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

[BurneyFM]

I am looking forward to this for 2 years now -- it would be great if there was a way to speed up the process.

[obregonmaxi]

just add this line to your project styles.css or styles .scss and voilá
@import '~saturn-datepicker/bundle.css';

[TomDobbelaere]

This is an issue from 2017, it's almost 2020, I'm just saying
I've currently come across a scenario where I need this, the current solution is to use two datepickers next to each other 🤷‍♂

[margielm]

@TomDobbelaere using 2 date pickers is one, but not the only, solution to this problem. We are using most excellent solution from @SaturnTeam (mentioned in this thread few times) and we are very happy with it.
It would be great to have official component - but in the meantime saturn-datepicker is doing the job.

[ghost]

Overall, I feel like Angular is dying. It just doesn't have that much energy behind it. Maybe Ivy will fix that.

[DanPride]

It would be awesome if we could include time in this.

Dan Pride
1-605-777-0491
http://danpride.com
https://SolomonsChariot.com
http://archaeolibrary.com/
http://kingsolomonsgate.com
http://www.linkedin.com/in/danielpride

On Wed, Dec 11, 2019 at 12:02 PM Ephraim Khantsis [e-mail]
wrote:

Overall, I feel like Angular is dying. It just doesn't have that much
energy behind it. Maybe Ivy will fix that.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/components/issues/4763?email_source=notifications&email_token=AASRINX72HJU5T5AYO5LBQ3QYFBNRA5CNFSM4DMTD4G2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGUMOSY#issuecomment-564709195,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AASRINS3S6MXHAHEEOXBXHLQYFBNRANCNFSM4DMTD4GQ
.

[guyng]

@mmalerba @roboshoes any news?

[mmalerba]

We're hoping to do this in Q1, @crisbeto will be working on it

[guyng]

We're hoping to do this in Q1, @crisbeto will be working on it

@mmalerba @crisbeto
Many people are counting on you. don't let them down..

[Splaktar]

This is now on the roadmap for Q1 as mentioned above, see the rest of the roadmap here.

[thiagojsf]

Looking forward to this feature... May we help somehow?

[Splaktar]

@thiagojsf you could help by testing it and providing feedback once it appears in material-experimental.

[botoxparty]

@Splaktar Would love to contribute, happy to test if you can shout out on here when it's up on experimental

[SaturnTeam]

I'm also would like to add that version to my datepicker!

[guyng]

@Splaktar Just a reminder, it is beginning of march and it's not yet in the material experimental. You said it should be released this quarter :)

[rgm267]

@Splaktar Just a reminder, it is beginning of march and it's not yet in the material experimental. You said it should be released this quarter :)

Well pressuring will really make sure it gets done quicker...

[guyng]

@Splaktar Just a reminder, it is beginning of march and it's not yet in the material experimental. You said it should be released this quarter :)

Well pressuring will really make sure it gets done quicker...

Yes, that's how it works usually. no pressure, no progress

[Splaktar]

@Splaktar Just a reminder, it is beginning of march and it's not yet in the material experimental. You said it should be released this quarter :)

@guyng I said no such thing. I pointed you to the Q1 roadmap which is still there and goes though the end of March. Either way, trying to enforce artificial deadlines on a project that you don't pay for or contribute to is... inappropriate.

As an update, I'm not working on the date range support, but I've seen some great demos of how it's coming along. I think that people will be very excited to use it :) Like any other major feature, not all use/edge cases will be supported in the first release. After it gets released, we'll gather feedback and prioritize additional enhancements (as usual).

[guyng]

@Splaktar Just a reminder, it is beginning of march and it's not yet in the material experimental. You said it should be released this quarter :)

@guyng I said no such thing. I pointed you to the Q1 roadmap which is still there and goes though the end of March. Either way, trying to enforce artificial deadlines on a project that you don't pay for or contribute to is... inappropriate.

As an update, I'm not working on the date range support, but I've seen some great demos of how it's coming along. I think that people will be very excited to use it :) Like any other major feature, not all use/edge cases will be supported in the first release. After it gets released, we'll gather feedback and prioritize additional enhancements (as usual).

Well, it's been almost 3 years since the initial request, what reaction did you expect? people i'v worked with no longer trust your(angular team) word since you consistently have been missing deadlines(e.g. angular 9 should have been released half year ago, date range a year ago, etc etc). Nothing personal, just think about what i said. if you want to build trust with the community meet your deadlines. and FYI, i did contribute to quite a few angular projects by emailing bugs list & potential features.
From outside view, it looks like only by nagging you/angular team is actually making progress to community requests, but that's just my opinion. Cheers.

[crisbeto]

It is being worked on (you can see the date-range branch). It's still missing a couple of features like comparison ranges, but we're on track to have it done by the end of March.

[guyng]

It is being worked on (you can see the date-range branch). It's still missing a couple of features like comparison ranges, but we're on track to have it done by the end of March.

Thanks for the update

[diogoterremoto]

Many thanks to all involved on this feature. Really excited to use it!

[Totati]

I wonder if it would be possible to use the date-range picker to set open ranges. Like 2020.03.05. - null; null - 2020.03.05. Cause that would be nice and handy.

[anbiniyar]

I am super excited for this feature! Thank you for working on it!

[clement911]

We're also eagerly waiting for this feature!
Is there a page with a demo of the current version so that we can provide feedback before it goes live?

[Splaktar]

@clement911 not yet, you can try the branch out though (see https://github.com/angular/components/issues/4763#issuecomment-595116421).

[clement911]

@Splaktar how do we 'try out' a branch?

[Splaktar]

@clement911 https://github.com/angular/components/blob/master/DEV_ENVIRONMENT.md#developer-guide-getting-your-environment-set-up. Then in the dev-app, you can check out the datepicker demo.

[clement911]

Thanks @Splaktar but honestly I just wish there would be a simpler way, like a demo that we can play with to provide some feedback on the component UX.

Will we be able to play with the date range on https://next.material.angular.io/components/datepicker ?

[Splaktar]

@clement911 something like that will be made available in the future.

[demiro]

excited!

[mfarahat]

I am very excited for this, are there any updates ?

[jelbourn]

You can see the demo of the in-progress work here: https://jelbourn-dev.firebaseapp.com/datepicker

FYI after starting we, we got some feedback that led to expanding the scope of the initial work to make sure we'll be able to eventually support touch selection, comparison ranges, and customizable range selection.

[demiro]

great.... would be also good example to see option with 2 months open the the same time when selecting a range (check most of the airlines... ryanair.com or avianca.com or united airlines or turkish airlines) this would be the most ux friendly...

also, one very UX feature would be in the input mask, when clicking on a date, to have a whole date selected .... so if I am editing 1st date in the range... and click on the second (and it was already in) to select the whole date (regardles of which part of the date I click) and obviously let me edit from the left onward...

and, maybe give a setting option, to have date part selected on the first click

meaning, if I want to change a year of the second date, now I would have to click on that year, and then double click again to select all numbers and then start typing to override it... instead of clicking a year to be selected and start typing, or click to select all and click again to edit normally desired digit...

I appreciate might not be desired functionality for all, but would be a nice feature to have and be able to configure it easily

[clement911]

It looks pretty great!

But I don't understand why March 9th o March 13th shows in a different color?

great.... would be also good example to see option with 2 months open the the same time when selecting a range (check most of the airlines... ryanair.com or avianca.com or united airlines or turkish airlines) this would be the most ux friendly...

We would also very much like this option. Our current calendar actually shows 2 months already because it's very common to select a date range that span across 2 consecutive months.

[clement911]

I'm assuming the input mask will be customizable / localizable ?
e.g., mm/dd/yyyy or dd/mm/yyyy?

Also the first day of the week could be different depending on locale, is that supported? (sorry
if it is already, I haven't used the existing calendar component)

[perchristian]

Sometimes the range needs to be set to only one day (from/to same day). This is not possible in the provided demo.

[mmalerba]

First, let me just say that with a UI as complex as a date range picker, there are a ton of features and possible UIs, but unfortunately we can't do them all.

Specifically to answer some of the questions above:

@demiro

1. There are no plans to add a 2 calendar side-by-side view, though we do intend to allow the <mat-calendar> to be used as a standalone component so that users can build their own side-by-side experience. We do intend to add the ability to scroll through months, but not in the first release.
2. The two ends of the range are completely separate <input> elements, so adding a feature to select the whole range would be quite complicated. This is not something we plan to do.

@clement911

1. The different color dates are what we call a "comparison" range. Its an extra feature we threw in because it was requested by a number of Google teams, but showing a comparison range is optional, so it can be left out if you don't need it.
2. Localization will work the same as the normal datepicker, the only localization feature added specifically for the range picker is that the divider character in the input can be customized

@perchristian That's a good point, let me run that one by our UX folks

[clement911]

Got it, thanks for these explanations.

Sometimes the range needs to be set to only one day (from/to same day)

I really hope that you fixed that one otherwise we just wouldn't be able to use this component.

[perchristian]

The arrow icons for previous/next months are lacking hover state.

[perchristian]

Sometimes we need to provide the user with a month picker. Are you planning to support configuring the picker to have month as the lowest level?

By the way: I am so glad you are developing this date range picker now :)

[demiro]

@mmalerba: shame there are no plans for side by side range... this dramatically improves UX... hopefully you will reconsider soon

[margielm]

@perchristian this is really a UX discussion, but does a datepicker really make sense for selecting a month? selecting a day is pretty "complex" for the user, because different months have different number of days, maybe you are interested in seeing day of a week, plus we have leap years. We don't have any of that complexity when you just want to select a month.
One could say that he/she wants to use date-picker for selecting a month to have consistency, but I would argue that simple dropdown with a month name, and an input/dropdown for a year - is easier to use.

[mmalerba]

Filed https://github.com/angular/components/issues/18958 for the missing hover state.

The concept of date granularity/precision is something we've thought about a bit, but currently no concrete plans.

Unless side-by-side view gets explicitly added to the Material Design spec, I think what's more likely is that we'll focus on trying to make it easier for users to implement that and other custom UIs using the same building blocks we use for the default datepicker experience, but I don't really see us adding an API specifically for that.

[margielm]

@mmalerba unless i am missing something Material Design spec does have side-by-side pickers:

https://material.io/components/pickers/#desktop-pickers

[mmalerba]

@margielm oh, so it does (sorry I've been looking at unfinished internal stuff, I didn't even realize there's an official published spec now 😄)

I've created https://github.com/angular/components/issues/18966 to track this, it won't be in the first version of the range picker though

[tobiasschweizer]

The concept of date granularity/precision is something we've thought about a bit, but currently no concrete plans.

I would be glad to help with precision (month and year), please see https://github.com/angular/components/issues/4853#issuecomment-615162582.

[crisbeto]

The feature is now in master and will be released in 10. Please post bugs as new issue reports. Closing and locking.