DatePickers are pretty much a dime a dozen these days, but if you are already using a framework that already has a DatePicker, it makes sense to use that.
ng-bootstrap
ng-bootstrap is a package of Angular components that are built using Bootstrap 4. So, if you’re already using Bootstrap and Angular, it could be a valid utility for you. (Spoiler alert – this is what I’m using)
NgbDatepicker
Unfortunately, it takes more than 0 effort to effectively use a DatePicker, so I figured I would jot down the basic implementation here so in the future I can refer back to it.
The NgbDatepicker uses an NgbDate object to store the date information. Its a simple enough object, but if you want to store it in some other format (like a JavaScript Date or a string), you can hook in to the dateSelect method and set things up however you want. Note that the property bound via [(ngModel)] is updated after this method is called, so you need to pass in the event parameter to get the selected date.
Obviously, there’s a bunch of other configurations that you can do with the NgbDatepicker, but I just wanted to write down this simple implementation so it would be easier for me to remember in the future.