Angular material date range picker [Detailed overview, 2020]

📣 Check out my full Angular Material Theming Workshop 📣
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

Recently #Angular team released 10th version of Angular framework which besides fixed bugs and infrastructural updates also brings some new features. And one of this feature is date range picker component which is part of Angular #Material library. It can be very useful if you are building the next AirBnB or Booking killer and in this video we will learn in depth what kind of features provides the component and how we can integrate it in our existing project. I hope you will find my tutorial useful.
Thank you for your attention and enjoy watching :)

Note:
If you are using Moment library to handle dates in your app then you should import MatMomentDateModule from @angular/material-moment-adapter

🕒 Time codes:
00:01:12 - My annoying talking ends here ;)
00:01:49 - Upgrade Angular to version 10
00:03:05 - Start to implement basic use-case
00:07:02 - How to work with the component inside form (Reactive Forms)

MatDateRangeInput property overview:
00:10:14 - Wtf is comparisonStart/comparisonEnd property
00:11:55 - Wtf is dateFilter property or how to disable certain date
00:14:44 - Wtf is separator property
00:15:33 - Public properties and how to access them

MatDateRangePicker property overview:
00:17:37 - Wtf is dateClass property
00:21:25 - Wtf is open property
00:22:15 - Wtf is startAt property
00:23:15 - Wtf is xPosition/yPosition property
00:24:24 - Open Datepicker programatically from TS class

✅ Angular Material CDK - Overlay Module lesson:

🔗 Links:
Link to Github repo:

Plugin for VS Code for easy console logging:

Official docs about date range picker:

Angular 10 full change log:

#Datepicker #webdevelopment #angularmaterial #typescript

[zstavba]

Thanks for the video. It's explained to me alot. But here is a question. I have both modules imported for DateRangePicker. And it's working fine. But if i add [dateFilter] to it. It gives me this error. U know why ?
Can't bind to 'dateFiler' since it isn't a known property of 'mat-date-range-input'.

[giorgimindiashvili]

Thank for this video. Its help me so much <3

[lizmeza]

Hi, interesting... i would like to know how i can add a button that returns the date to "today" in the header (close to the right and left button). Thank you

[thanhnguyvan]

Can we custom date range with 2 view of Mat Calendar next to each other just by Angular Material?

[ChaitanyaAgile]

I want to have inline range picker without input like in combobox, is it possible to use mat calendar as range picker ?

[nirmalkandwal]

I would like to disable some custom date range in a month like Date 3 -6, 10-15, 20-23.. do you have example

[khushalchheda]

Is there any way to format the date selected like YYYY/DD/MM or YY-MM-DD

[fanturyP]

Congratulations on the video, I have a question. How do I format pt-BR from date range picker to dd/MM/yyyy
?

[SanketDhawan]

Hi can you please help me with the value of selected date? i need only date not time and location please help...

[quirkie]

Hello. Can u tell me how to put first day of datepicker as Monday.

[sonalibhosale]

I also have a use case that my datepicker value should be based on the value I will select in combobox.In combo there are three options today, yesterday and custom if I choose particular value today it will show showdays date if yesterday yesterdays and if custom it allow manually user to select range

[yoyohoney]

I have searched at lot of places to find a way to patch value in material date range picker?
I have been stuck on this from a lot of time. It will be very grateful if you help me to patch value in a form containing date range picker🙏🏼

[reegajenet]

how do find the financial year start date and end date in angular material and if i change the financial start date automatic change the financial end date how do fix it . and upload the video sir

[jassikaur]

Is there a way to add a mat-select component within the calendar pop-up. I need it to select custom ranges like 3 months, 5 months etc.

[sonalibhosale]

Hey can you please share how to use angular material interfaces methods? I need to use the seletionfinished method from matdaterangeselection strategy so as I will get to know when user has finished selecting value

[santhoshreddy]

Hi can you please share the sample example date range component including time picker as well

[sonalibhosale]

Hey, I have a use case that I have to increment and decrement the date by one using button in front of date range picker. Button should look like a spinner as you click upward arrow date should increase by one similarly as you decrease, it should decrease the date by one. And also I have to add validation that you can select date range max 7days. Can you please help?