@eform/ng-formio-builder
Version:
The Angular.js form builder component.
181 lines (175 loc) • 11.4 kB
JavaScript
module.exports = function(app) {
app.config([
'formioComponentsProvider',
function(formioComponentsProvider) {
formioComponentsProvider.register('datetime', {
onEdit: ['$scope', function($scope) {
// FOR-34 - Update 12hr time display in the field, not only time picker.
$scope.$watch('component.timePicker.showMeridian', function(value) {
var _old = value ? 'HH' : 'hh';
var _new = !value ? 'HH' : 'hh';
if ($scope.component.enableTime) {
$scope.component.format = $scope.component.format.toString().replace(_old, _new);
}
});
$scope.setFormat = function() {
var stdFormatDateTime = 'yyyy-MM-dd HH:mm';
var stdFormatDate = 'yyyy-MM-dd';
var stdFormatTime = 'HH:mm';
if ($scope.component.timePicker.showMeridian) {
stdFormatDateTime = 'yyyy-MM-dd hh:mm';
stdFormatTime = 'hh:mm';
}
var stdFormats = [stdFormatDateTime, stdFormatDate, stdFormatTime];
if ($scope.component.enableDate && $scope.component.enableTime && stdFormats.indexOf($scope.component.format) !== -1) {
$scope.component.format = stdFormatDateTime;
}
else if ($scope.component.enableDate && !$scope.component.enableTime && stdFormats.indexOf($scope.component.format) !== -1) {
$scope.component.format = stdFormatDate;
}
else if (!$scope.component.enableDate && $scope.component.enableTime && stdFormats.indexOf($scope.component.format) !== -1) {
$scope.component.format = stdFormatTime;
}
};
$scope.startingDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
$scope.modes = [
{
name: 'day',
label: 'Day'
},
{
name: 'month',
label: 'Month'
},
{
name: 'year',
label: 'Year'
}
];
}],
icon: 'fa fa-calendar-plus-o',
views: [
{
name: 'Display',
template: 'formio/components/datetime/display.html'
},
{
name: 'Data',
template: 'formio/components/datetime/data.html'
},
{
name: 'Validation',
template: 'formio/components/datetime/validate.html'
},
{
name: 'API',
template: 'formio/components/common/api.html'
},
{
name: 'Layout',
template: 'formio/components/common/layout.html'
},
{
name: 'Conditional',
template: 'formio/components/common/conditional.html'
}
],
documentation: 'http://help.form.io/userguide/#datetime'
});
}
]);
app.run([
'$templateCache',
function($templateCache) {
// Create the settings markup.
$templateCache.put('formio/components/datetime/display.html',
'<ng-form>' +
'<form-builder-option property="label"></form-builder-option>' +
'<form-builder-option property="hideLabel"></form-builder-option>' +
'<form-builder-option-label-position></form-builder-option-label-position>' +
'<form-builder-option property="defaultDate"></form-builder-option>' +
'<form-builder-option property="placeholder"></form-builder-option>' +
'<form-builder-option property="description"></form-builder-option>' +
'<form-builder-option property="tooltip"></form-builder-option>' +
'<form-builder-option property="errorLabel"></form-builder-option>' +
'<form-builder-option property="useLocaleSettings" title="Use locale settings to display date and time."></form-builder-option>' +
'<form-builder-option property="format" label="Date Format" placeholder="Enter the Date format" title="The format for displaying this field\'s date. The format must be specified like the <a href=\'https://docs.angularjs.org/api/ng/filter/date\' target=\'_blank\'>AngularJS date filter</a>." ng-if="!component.useLocaleSettings"></form-builder-option>' +
'<form-builder-option property="customClass"></form-builder-option>' +
'<form-builder-option property="tabindex"></form-builder-option>' +
'<form-builder-option property="clearOnHide"></form-builder-option>' +
'<form-builder-option property="protected"></form-builder-option>' +
'<form-builder-option property="persistent"></form-builder-option>' +
'<form-builder-option property="encrypted" class="form-builder-premium"></form-builder-option>' +
'<form-builder-option property="hidden"></form-builder-option>' +
'<form-builder-option property="autofocus"></form-builder-option>' +
'<form-builder-option property="disabled"></form-builder-option>' +
'<form-builder-option property="dataGridLabel"></form-builder-option>' +
'<form-builder-option property="tableView"></form-builder-option>' +
'</ng-form>'
);
$templateCache.put('formio/components/datetime/data.html',
'<ng-form>' +
'<form-builder-option property="defaultDate"></form-builder-option>' +
'<uib-accordion>' +
'<div uib-accordion-group heading="Calculated Value" class="panel panel-default">' +
'<formio-script-editor rows="5" id="calculateValue" name="calculateValue" ng-model="component.calculateValue" placeholder="/*** Example Code ***/\nvalue = data[\'mykey\'] + data[\'anotherKey\'];"></formio-script-editor>' +
'<small>' +
'<p>Enter code to calculate a value.</p>' +
'<p>You must assign the <strong>value</strong> variable as the result you want for the default value.</p>' +
'<p>The global variable <strong>data</strong> is provided, and allows you to access the data of any form component, by using its API key.</p>' +
'<p>Also <strong>moment</strong> library is available, and allows you to manipulate dates in a convenient way.</p>' +
'</small>' +
'</div>' +
' <form-builder-option property="calculateServer" type="checkbox" label="Calculate on server" tooltip="Perform these calculations on the server as well as the frontend."></form-builder-option>' +
'</uib-accordion>' +
'<uib-accordion>' +
'<div uib-accordion-group heading="Date" class="panel panel-default">' +
'<div class="checkbox">' +
'<label form-builder-tooltip="Enables date input for this field.">' +
'<input type="checkbox" id="enableDate" name="enableDate" ng-model="component.enableDate" ng-checked="component.enableDate" ng-change="setFormat()"> {{\'Enable Date Input\' | formioTranslate}}' +
'</label>' +
'</div>' +
'<form-builder-option property="datePicker.minDate"></form-builder-option>' +
'<form-builder-option property="datePicker.maxDate"></form-builder-option>' +
'<div class="form-group">' +
'<label for="startingDay" form-builder-tooltip="The first day of the week.">{{\'Starting Day\' | formioTranslate}}</label>' +
'<select class="form-control" id="startingDay" name="startingDay" ng-model="component.datePicker.startingDay" ng-options="idx as day | formioTranslate for (idx, day) in startingDays"></select>' +
'</div>' +
'<div class="form-group">' +
'<label for="minMode" form-builder-tooltip="The smallest unit of time view to display in the date picker.">{{\'Minimum Mode\' | formioTranslate}}</label>' +
'<select class="form-control" id="minMode" name="minMode" ng-model="component.datePicker.minMode" ng-options="mode.name as mode.label | formioTranslate for mode in modes"></select>' +
'</div>' +
'<div class="form-group">' +
'<label for="maxMode" form-builder-tooltip="The largest unit of time view to display in the date picker.">{{\'Maximum Mode\' | formioTranslate}}</label>' +
'<select class="form-control" id="maxMode" name="maxMode" ng-model="component.datePicker.maxMode" ng-options="mode.name as mode.label | formioTranslate for mode in modes"></select>' +
'</div>' +
'<form-builder-option property="datePicker.yearRows" label="Number of Years Displayed (Rows)" placeholder="Year Range (Rows)" title="The number of years to display in the years view (Rows)."></form-builder-option>' +
'<form-builder-option property="datePicker.yearColumns" label="Number of Years Displayed (Columns)" placeholder="Year Range (Columns)" title="The number of years to display in the years view (Columns)."></form-builder-option>' +
'<form-builder-option property="datePicker.showWeeks" type="checkbox" label="Show Week Numbers" title="Displays the week numbers on the date picker."></form-builder-option>' +
'</div>' +
'</uib-accordion>' +
'<uib-accordion>' +
'<div uib-accordion-group heading="Time" class="panel panel-default">' +
'<div class="checkbox">' +
'<label form-builder-tooltip="Enables time input for this field.">' +
'<input type="checkbox" id="enableTime" name="enableTime" ng-model="component.enableTime" ng-checked="component.enableTime" ng-change="setFormat()"> {{\'Enable Time Input\' | formioTranslate}}' +
'</label>' +
'</div>' +
'<form-builder-option property="timePicker.hourStep" type="number" label="Hour Step Size" title="The number of hours to increment/decrement in the time picker."></form-builder-option>' +
'<form-builder-option property="timePicker.minuteStep" type="number" label="Minute Step Size" title="The number of minutes to increment/decrement in the time picker."></form-builder-option>' +
'<form-builder-option property="timePicker.showMeridian" type="checkbox" label="12 Hour Time (AM/PM)" title="Display time in 12 hour time with AM/PM."></form-builder-option>' +
'<form-builder-option property="timePicker.readonlyInput" type="checkbox" label="Read-Only Input" title="Makes the time picker input boxes read-only. The time can only be changed by the increment/decrement buttons."></form-builder-option>' +
'</div>' +
'</uib-accordion>' +
'</ng-form>'
);
$templateCache.put('formio/components/datetime/validate.html',
'<ng-form>' +
'<form-builder-option property="validate.required"></form-builder-option>' +
'<form-builder-option property="validate.customMessage"></form-builder-option>' +
'<form-builder-option-custom-validation></form-builder-option-custom-validation>' +
'</ng-form>'
);
}
]);
};