Be a Socialite and  Follow Us:

  • White Facebook Icon
  • White Twitter Icon
  • White Instagram Icon
Search
  • Clearly Innovative

Ionic Framework Custom Formly Template using DatePicker Plugin

Updated: Dec 14, 2018



Overview:

Video and Source code for starting point for this blog Post

YouTube Video – https://www.youtube.com/watch?v=iM_KjhY4lL0GitHub Source Code – https://github.com/aaronksaunders/ionic-formly-demo


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 solutionInstall the calendar plugin – $cordovaDatePicker

Install ngCordova


Update index.html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>


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

<script type="text/ng-template" id="inputDatePicker.html"> <ion-item class="item-icon-right"> <i ng-click="to.onclick(model,options)" class="icon ion-ios-calendar-outline"></i>    {{ model[options.key] | date : to.dateFormat }}  </ion-item></script>

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








32 views