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.

[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 #4763 (comment)).

[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 #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 #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 #4853 (comment).

[crisbeto]

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