Why are Angular date pickers so slow?

Question

Why do Angular JS date pickers use so much CPU? When you have a few of them on a page they significantly slow a site down.

Is there any way to mitigate this?

For example, the official Angular for Bootstrap directive:

And the mobinni/material-date-picker:

Answer 1

Since I couldn't find an efficient AngularJS datepicker I switched to using a standalone one that doesn't block the AngularJS digest: https://github.com/dbushell/Pikaday. My application is now much faster.

As for the suggestions in the comments, I don't see how a wrapper would make anything faster (more code = less speed), and I can't change the code of an external component safely.

I guess maybe people just write components badly. Or perhaps this type of frustration is inherent in AngularJS and why people are switching to React.

Answer 2

I believe nowadays a good light weight alternative is to use HTML5 native function in the browser. Simply use <input type="date"> and a browser specific date picker will pop up. It is supported by all modern browsers, very easy to implement, and good enough for most cases. One notable shortcoming with this method is that the placeholder attribute does not work, as of 2023...