Manage Date Selection with the Angular Material Datepicker

Brian Troncone
InstructorBrian Troncone

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

This lesson explores the angular material datepicker component. This includes basic setup and configuration options, validation and date range scenarios, configuring the datepicker for touch use, and how to utilize momentjs with the material datepicker.

Instructor: [00:00] To get started with the material design date picker, you need to include the MatDatepickerModule and the MatNativeDateModule in your NgModule imports. The MatNativeDateModule allows the date picker to deal with native JavaScript date objects.

[00:12] If you want to utilize moment js dates, we'll see how to do that later in the lesson. Like other material design inputs, you'll start by adding a material form field which will wrap your date picker input.

[00:21] Next, we'll add an input with the matInput directive. This will give us the placeholders, validation, and material design styling we're used to. After that we'll add the MatDatepicker component, which provides the calendar and means for the user to make their date selections.

[00:33] Lastly, we need to add the mat-datepicker-toggle component which is going to be the trigger to open and close the date picker. We'll go ahead and add the matSuffix directive to this component to align the toggle button at the end of the input. Both the mat-datepicker-toggle component and our input require a reference to the date picker.

[00:49] We'll go ahead and create that now and feed it into our date picker toggle with the four input, and into our input field with the MatDatepicker input. Everything is now wired up correctly for a material design date picker. Let's see how this looks.

[01:01] We now have a nice material design themed date picker that allows the user to toggle between years and months and make a selection. If you want your date picker to start at a certain date, you can utilize the start at input on the MatDatepicker component. I went ahead and added a property to the date picker [inaudible] component, making our start date November 1st.

[01:17] When we refresh and open the date picker, we can see the selection now starts on November 1st. If you would prefer the date picker calendar start on the year view rather than the month, maybe for a long date range selection, you can utilize the start view input also on the MatDatepicker component.

[01:34] The user will now start on the year selection when they toggle the calendar open. The material design date picker also allows for a minimum date and a maximum date. To configure these dates, you can use the min and max input on your input element.

[01:46] For demo, I'm going to set the min date property to October 1st and the max date property to December 24th. When we refresh, we see everything before October is disabled as well as everything after December 24th. Now while the current date picker works great for users with a mouse, it may not be ideal for touch scenarios.

[02:09] To handle this, the MatDatepicker component accepts a touch UI input of 1 or For now, we're going to hard-code 1 just to see how it looks like. The touch UI date picker is modal-based, and centered on the screen with larger buttons, allowing for easier selections for mobile users.

[02:23] One way you could determine whether the user is on a touch device, is by utilizing the Angular CDK platform module. We'll jump back to our lesson module and import the platform module from angularcdk/platform.

[02:34] Next, we'll include in our module imports. We can then inject the platform service in our date picker lesson component.

[02:43] Finally, we'll create a getter name, is TouchDevice, which using the platform service which return 1 if this is an iOS or Android device. We can then use this variable in the touch UI input, presenting users with a touch-enabled calendar when they're on one of these devices. To enable this, you need to install the Angular Material Moment Adapter.

[03:01] Next, we need to import the matMomentDateModule and include it in our imports. We'll go ahead and import the moment library and convert the native JavaScript dates we were using before into moments.

[03:13] When we refresh, we can see the date picker functions just as it did before, but now utilizing moment js.

~ 4 years ago

Hi Brian, how can I use the angular material datepicker to return month and year only? An example use case might be credit card expiry date. Thanks!

Brian Troncone
Brian Tronconeinstructor
~ 4 years ago

Hello Michael,

Sorry for the delay, here is an example displaying how to adjust the format of the datepicker to fit your needs. Hope this helps, thanks for watching!

Customizing Display Formats

Edit: Looks like the link to the anchor isn't working properly (at least on my browser). The example can be found under the 'Customizing the parse and display formats' section.

~ 4 years ago

Thanks Brian. I have followed this path before but couldn't find an easy way and stop drilling down further to the actual calendar day selection. What I really want is by starting the calendar popup by displaying the month view and once a month is selected, I want the popup goes away and the input is populated with the selected month of the year without further showing the day view selection.

By the way, thank you very much for your excellent course, I really enjoy the fast pace of the course, no introduction and time wasted, just packed with all the goodness 😊



Sent from Outlook