Angular material date range picker [Detailed overview, 2020]

? Check out my full Angular Material Theming Workshop ?
https://bit.ly/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

✅ Check out my videos about Angular Material Library: https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

✅ Angular Material CDK - Overlay Module lesson:
https://youtu.be/Dkh0zpsc0Zw

✅ Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

? Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

Plugin for VS Code for easy console logging:
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

Official docs about date range picker:
https://material.angular.io/components/datepicker/overview#date-range-selection

Angular 10 full change log:
https://github.com/angular/angular/blob/master/CHANGELOG.md#1000-2020-06-24

#Datepicker #webdevelopment #angularmaterial #typescript