angular.module('schemaForm').config(['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider', 'sfBuilderProvider', function(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider, sfBuilderProvider) { function dateParser(value){ if(value && value.toISOString){ return value.toISOString(); }else{ return ''; } } function dateFormatter(value) { if (angular.isUndefined(value) || value === null) { return value; } return new Date(value); } // First, we want this to be the default for a combination of schema parameters var time = function (name, schema, options) { if (schema.type == 'string' && schema.format == 'time') { // Initiate a form provider var f = schemaFormProvider.stdFormObj(name, schema, options); f.key = options.path; f.type = 'time'; if(schema['min']){ f.min = schema['min']; } if(schema['max']){ f.min = schema['max']; } f.$parsers = [dateParser]; f.$formatters = [dateFormatter]; f.validationMessage = { min: "Time must be after {{form.min | date:'shortTime':'UTC'}}", max: "Time must be before {{form.max | date:'shortTime':'UTC'}}", }; // Add it to the lookup dict (for internal use) options.lookup[sfPathProvider.stringify(options.path)] = f; return f; } }; var date = function (name, schema, options) { if (schema.type == 'string' && schema.format == 'date') { // Initiate a form provider var f = schemaFormProvider.stdFormObj(name, schema, options); f.key = options.path; f.type = 'date'; if(schema['min']){ f.min = schema['min']; } if(schema['max']){ f.min = schema['max']; } f.$parsers = [dateParser]; f.$formatters = [dateFormatter]; // Fix validation message to show existing constraint f.validationMessage = { min: "Date must be after {{form.min | date:'mediumDate':'UTC'}}", max: "Date must be before {{form.max | date:'mediumDate':'UTC'}}", }; // Add it to the lookup dict (for internal use) options.lookup[sfPathProvider.stringify(options.path)] = f; return f; } }; // Add our default to the defaults array schemaFormProvider.defaults.string.unshift(time); schemaFormProvider.defaults.string.unshift(date); schemaFormDecoratorsProvider.addMapping( 'bootstrapDecorator', // Name of the decorator you want to add to. 'time', // Form type that should render this add-on '/schemaForm/sfDateTime/sfDateTime.html' // Template name in $templateCache ); schemaFormDecoratorsProvider.addMapping( 'bootstrapDecorator', // Name of the decorator you want to add to. 'date', // Form type that should render this add-on 'sfDateTime.html' // Template name in $templateCache ); }]); 

<div class="form-group has-feedback {{::form.htmlClass + ' ' + idClass}} sfDateTime" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}" > <label class="control-label {{::form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{::fieldId(true, false)}}">{{form.title}}</label> <div ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}"> <span ng-if="form.fieldAddonLeft" class="input-group-addon" ng-bind-html="form.fieldAddonLeft"></span> <input ng-if="form.type == 'time'" min="{{form.min}}" max="{{form.max}}" class="form-control {{::form.fieldHtmlClass}}" type="{{::form.type}}" ng-model="$$value$$" ng-model-options="{ timezone: 'UTC' }" id="{{::fieldId(true, false)}}" sf-changed="form" ng-attr-placeholder="{{::form.placeholder}}" ng-disabled="form.readonly" sf-field-model schema-validate="form" name="{{::fieldId(true, false)}}"> </input> <input ng-if="form.type == 'date'" min="{{form.min | date:'yyyy-MM-dd':'UTC'}}" max="{{form.max | date:'yyyy-MM-dd':'UTC'}}" class="form-control {{::form.fieldHtmlClass}}" type="{{::form.type}}" ng-model="$$value$$" id="{{::fieldId(true, false)}}" sf-changed="form" ng-attr-placeholder="{{::form.placeholder}}" ng-disabled="form.readonly" sf-field-model schema-validate="form" name="{{::fieldId(true, false)}}"> </input> <span ng-if="form.fieldAddonRight" class="input-group-addon" ng-bind-html="form.fieldAddonRight"></span> </div> <span ng-if="form.feedback !== false" class="form-control-feedback" ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': form.disableSuccessState !== true && hasSuccess(), 'glyphicon-remove': form.disableErrorState !== true && hasError() }" aria-hidden="true"></span> <span ng-if="hasError() || hasSuccess()" id="{{::fieldId(true, true) + '-status'}}" class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span> <span class="help-block" sf-message="form.description"></span> </div>