Angular Material Date Range Picker [Detailed Overview, 2020]

Angular Material Date Range Picker  [Detailed Overview, 2020]

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

datepicker webdevelopment angularmaterial typescript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Whatโ€™s New In Typescript 4.0?

Today I am going to talk about new features in Typescript 4.0. TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Introduction to TypeScript | TypeScript Tutorial | TypeScript for Beginners

โ˜… This video will give you an introductory overview of Typescript and the best way to learn it โ˜… TypeScript is a programming language that helps you write JavaScript code effortlessly and efficiently โ˜… Typescript is part of our Live Training module on Angular. โ˜… Topics Covered in the video: โœ“ Introduction to TypeScript โœ“ Installation โœ“ Variables โœ“ Data Types โœ“ Functions โœ“ Interfaces โœ“ Classes โœ“ Access Modifiers

Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners

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.

Will TypeScript Replace JavaScript? Learn TypeScript | TypeScript Tutorial 2021

In today's video, I'm gonna show you all the basic concepts you need to know to be successful with TypeScript as well as how you can start using TypeScript right away with React. TypeScript will make you a better JavaScript developer for several reasons. Youโ€™ll feel confident when writing code. Fewer errors will appear in your production code. It will be easier to refactor code. Youโ€™ll write fewer tests. And overall, youโ€™ll have a better coding experience in your editor.