Creating a week picker using Angular material UI Date Picker

Vidhya Vikraman Nair
1 min readSep 30, 2020

I came across a usecase to implement a week picker using angular material-ui. I converted the range selectors in material-ui date picker into week picker.

The detailed documentation and examples of range pickers are available in the material ui docs.

We can start date as the first day of week using the dateChange property in the input[matStartDate] .Also, set the end date as the last day of the week using the dateChange property in the input[matEndDate].

If you need to change the date into specific date formats, add libaries like moment.js , and set start and end date, using that.

Please find the code in the stackbliz link.

Happy coding… 😊

--

--

Vidhya Vikraman Nair

Full Stack Developer with an experience of 8 years in Java, Spring Boot, Spring MVC, Spring Cloud,React Js, Angular, MySQL, Sql Server, Hibernate, JPA.