angular schema form with custom field

angular schema form with custom field example

HTML

<script src="http://textalk.github.io/angular-schema-form/bower_components/tv4/tv4.js"></script>
<script src="http://textalk.github.io/angular-schema-form/bower_components/angular/angular.min.js"></script>
<script src="http://textalk.github.io/angular-schema-form/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="http://textalk.github.io/angular-schema-form/bower_components/objectpath/lib/ObjectPath.js"></script>
<script src="http://textalk.github.io/angular-schema-form/bower_components/moment/moment.js"></script>
<script src="http://textalk.github.io/angular-schema-form/dist/schema-form.min.js"></script>
<script src="http://textalk.github.io/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">
<body ng-app="test">
    <div ng-controller="FormController">
        <form sf-schema="schema" sf-form="form" sf-model="model"></form>
    </div>
</body>

JavaScript

var app = angular.module("test", ["schemaForm"]);


angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/bootstrap/datepicker/datepicker.html","<div class=\"form-group {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError()}\">\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\n  <div ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\">\n    <span ng-if=\"form.fieldAddonLeft\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonLeft\"></span>\n    <input ng-show=\"form.key\"\n           style=\"background-color: white\"\n           type=\"text\"\n           class=\"form-control {{form.fieldHtmlClass}}\"\n           schema-validate=\"form\"\n           ng-model=\"$$value$$\"\n           ng-disabled=\"form.readonly\"\n           pick-a-date=\"form.pickadate\"\n           min-date=\"form.minDate\"\n           max-date=\"form.maxDate\"\n           name=\"{{form.key.slice(-1)[0]}}\"\n           format=\"form.format\" />\n    <span ng-if=\"form.fieldAddonRight\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonRight\"></span>\n  </div>\n  <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");}]);
angular.module('schemaForm').directive('pickADate', function () {

  //String dates for min and max is not supported
  //https://github.com/amsul/pickadate.js/issues/439
  //So strings we create dates from
  var formatDate = function(value) {
    //Strings or timestamps we make a date of
    if (angular.isString(value) || angular.isNumber(value)) {
      return new Date(value);
    }
    return value; //We hope it's a date object
  };

  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      ngModel: '=',
      pickADate: '=',
      minDate: '=',
      maxDate: '=',
      format: '='
    },
    link: function (scope,...