One of this feature is date range picker component which is part of Angular #Material library. 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.
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
Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners: My goal with this courses is just give your the fundamentals of the language, show you what TypeScript is and how to use it. We as developers don't have time neither can we afford to spend too much time on any tehcnology.