Ionic Framework Custom Formly Template using DatePicker Plugin - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

 

Screenshot-datepicker Screenshot-datepicker-selected

 

Overview:

 

Video and Source code for starting point for this blog Post

Read more information here: http://docs.angular-formly.com/docs/custom-templates

For this sample, we want to have a datePicker integrated with the ionic-formly object to manage the input in a seamless manner. This is a quick example of how one might do something like this in a project. This code is based on the previous post, video on using Ionic-Formly Templates.

 

Basic Steps for Integrating the Formly Template into the Ionic Framework solution

Install the calendar plugin – $cordovaDatePicker

Install ngCordova

Update index.html

Then, include ngCordova  as a dependency in your angular module:

Add new Formly Template to index.html, the template is the html that will render the text label for the date along with a calender icon for a button as part of the form

Inject formlyConfig  as a parameter being passed into the controller along with $cordovaDatePicker

Add the code for the new formly type in the controller, we will call this function to create the type to be used in the form.

Here is  the updated controller showing all of the changes integrated into  the code

 

ionic-formly-calendar