Open
Description
Enhancement
HTML5 native time and date pickers
I've created a HTML5 version of the time and date input object that could be a nice addition to the list of supported fields. This seems a lot easier than dealing with the Textalk datepicker that I see commonly used (and which doesn't support time input). Is there any possibility or interest in adding this in as an official type?
Below is the source, but the template directory would need to be changed slightly.
sfDateTime.js
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
);
}]);
sfDateTime.html
<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>
@json-schema-form/angular-schema-form-bootstrap-lead