top of page
  • Writer's pictureClearly Innovative

Ionic Framework Custom Formly Template using DatePicker Plugin

Updated: Dec 14, 2018


Video and Source code for starting point for this blog Post

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

<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

178 views0 comments


bottom of page