Using Angular Material Datepicker in Ionic Project


#1

Has anyone tried using some components from Angular Material in an Ionic Project?

I think combining both could be good, especially if building a PWA (Angular Materials Datepicker for example works good on both desktop and mobile, which is not the case for ion-datetime).

Is it recomended combining the two? Will the bundle size grow by a lot or will tree shaking remove all the unused components? What are your thoughts and experiences?


#2

I haven’t tried that yet. Was kinda hoping Ionic would update their objects for desktop before I had to spend time on that.

So far, I’ve noticed desktop usability issues with the <ion-datetime> and <ion-select> objects. To work around the datetime issue, I’m currently using an <ion-input> for desktop dates:

<ion-item>
	<ion-label floating>Hire Date</ion-label>
	<ion-input hideWhen="mobile" type="date" [(ngModel)]="hireDate"></ion-input>
	<ion-datetime showWhen="mobile" displayFormat="MM/DD/YYYY" min="1900-01-01" max="2100-12-31" [(ngModel)]="hireDate"></ion-datetime>
</ion-item>

That at least allows the user to type in a date, and it displays the calendar in newer browsers.

I also have a need for a multi-value select box, however, and I’m leaning towards functionality like the MD contact chip box. It looks like the Angular Material Chip Input directive does that. It would be awesome if I didn’t have to spend time on implementing that right now, though. :stuck_out_tongue: