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>