Manage Date Selection with the Angular 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.