Using Pikaday with Angular Formly

Posted 21st December 2015

Pika­day is a great lit­tle date selec­tor plu­gin. Whilst the Pika­day Angu­lar plu­gin makes it easy to inte­grate into an Angu­lar appli­ca­tion, there’s slightly more work involved in get­ting it work­ing with Angu­lar Formly.

If you haven’t used Formly, it’s essen­tially a frame­work for cre­at­ing forms declar­a­tively; rather than writ­ing out its HTML by hand. It takes care of ren­der­ing the rel­e­vant con­trols and their labels, enables you to attach val­i­da­tion and it will inject error mes­sages for you, and a num­ber of other features.

The prob­lem with using Pika­day with Formly is that you’re prob­a­bly going to want to trans­late the dis­play value of the plu­gin into a for­mat more suit­able for stor­age. For exam­ple in one form you might dis­play “12 Jan­u­ary 2016″ but want it bound to a model in ISO 6031 format.