Adding a custom type to angular-schema-form - datepicker

Question

I'm trying to add a custom type to angular-schema-form for the ui-bootstrap datepicker.

I've followed the instructions, but my field isn't rendered when opening the form.

My module, loaded into the page:

angular.module('schemaForm-datepicker', ['schemaForm']).config(
[
    'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
    function (schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {

        var picker = function (name, schema, options) {
            console.log(schema.type);
            if (schema.type === 'date') {
                console.log("found");
                var f = schemaFormProvider.stdFormObj(name, schema, options);
                f.key = options.path;
                f.type = 'datepicker';
                options.lookup[sfPathProvider.stringify(options.path)] = f;
                return f;
            }
        };

        schemaFormProvider.defaults.object.unshift(picker);

        //Add to the bootstrap directive
        schemaFormDecoratorsProvider.addMapping('bootstrapDecorator', 'datepicker',
            'template/datepicker.html');
        schemaFormDecoratorsProvider.createDirective('datepicker',
            'template/datepicker.html');
    }
]);

My template:

<div class="form-group" ng-class="{'has-error': hasError()}">
    <label class="control-label" ng-show="showTitle()">{{form.title}}</label>

    <input type="text"
           class="form-control"
           schema-validate="form"
           ng-model="$$value$$"
           placeholder="Date" />

    <span class="help-block" sf-message="form.description"></span>
</div>

Schema Data:

{"type":"object","properties":{"FirstName":{"type":"string","title":"FirstName"},"LastName":{"type":"string","title":"LastName"},"CompanyName":{"type":"string","title":"CompanyName"},"EmailAddress":{"type":"string","title":"EmailAddress"},"JoinDate":{"type":"date","title":"JoinDate"}}}

Any ideas?

Answer 1

Assuming you are making changes date type. You have to include your type of field in schema. To implement add on, you have to

1. Add a new type of field
2. Add a new decorator

As it states in documentation, your new type should be second parameter to addMapping, then provide template and make sure you declare that type in your schema to display.

$scope.form = 
[
 {
   key: "birthday",
   type: "datepicker"
 }
];

In your case, you have to change date to:

"JoinDate": {"type":"datepicker","title":"JoinDate"}.

note: datepicker already exists you can use that form type. but your custom impelementation will work as long as you dont include angular-schema-form-datepicker

documentation does have some information but it is confusing for first time. https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md.

sorry, i cant comment so posting as answer.