Using Angular Material Datepicker in Ionic Project

Ionic Framework ionic-v3
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 Likes
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:

3

I have been working on a project with both Angular Material and Ionic. The current version I am using is Angular Material V13 and Ionic V6 (Before I used both Ionic V4 and V5 with Angular Material as well, there is no problem). So far everything else is working fine (It is a PWA web application only, no mobile app or desktop) except for one issue that I am facing: [ Facing issues using Angular Material Datepicker in Ionic modal].

But you can work around use the default Ionic datepicker. I tried it and there is no issue on that. Other than that, I think you just have to work on some style changes to make the fields control fit in and look nice. Nothing functional that I have noticed so far.