formiojs-eorion 0.1.60 → 0.1.62

package/Formio.js

@@ -1727,7 +1727,7 @@ Formio.projectUrlSet = false;
 Formio.plugins = [];
 Formio.cache = {};
 Formio.Providers = _providers.default;
-Formio.version = '0.1.60';
+Formio.version = '0.1.62';
 Formio.pathType = '';
 Formio.events = new _EventEmitter.default();
 Formio.cdn = new _CDN.default();

package/components/builder.js

@@ -78,7 +78,9 @@ var _IconButton = _interopRequireDefault(require("./iconButton/IconButton.form")
 var _ButtonGroups = _interopRequireDefault(require("./buttonGroups/ButtonGroups.form"));
 var _File2 = _interopRequireDefault(require("./file_china_grid/File.form"));
 var _Range = _interopRequireDefault(require("./range/Range.form"));
+var _DateTimeRange = _interopRequireDefault(require("./datetimeRange/DateTimeRange.form"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_.default.datetimeRange.editForm = _DateTimeRange.default;
 _.default.range.editForm = _Range.default;
 _.default.fileUds.editForm = _File2.default;
 _.default.buttonGroups.editForm = _ButtonGroups.default;

package/components/datetimeRange/DateTimeRange.form.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+require("core-js/modules/es.array.concat.js");
+var _Components = _interopRequireDefault(require("../Components"));
+var _DateTimeRangeEdit = _interopRequireDefault(require("./editForm/DateTimeRange.edit.data"));
+var _DateTimeRangeEdit2 = _interopRequireDefault(require("./editForm/DateTimeRange.edit.date"));
+var _DateTimeRangeEdit3 = _interopRequireDefault(require("./editForm/DateTimeRange.edit.display"));
+var _DateTimeRangeEdit4 = _interopRequireDefault(require("./editForm/DateTimeRange.edit.time"));
+var _DateTimeRangeEdit5 = _interopRequireDefault(require("./editForm/DateTimeRange.edit.validation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _default() {
+  for (var _len = arguments.length, extend = new Array(_len), _key = 0; _key < _len; _key++) {
+    extend[_key] = arguments[_key];
+  }
+  return _Components.default.baseEditForm.apply(_Components.default, [[{
+    key: 'display',
+    components: _DateTimeRangeEdit3.default
+  }, {
+    label: 'Date',
+    key: 'date',
+    weight: 1,
+    components: _DateTimeRangeEdit2.default
+  }, {
+    label: 'Time',
+    key: 'time',
+    weight: 2,
+    components: _DateTimeRangeEdit4.default
+  }, {
+    key: 'data',
+    components: _DateTimeRangeEdit.default
+  }, {
+    key: 'validation',
+    components: _DateTimeRangeEdit5.default
+  }, {
+    key: 'addons',
+    ignore: true
+  }]].concat(extend));
+}

package/components/datetimeRange/DateTimeRange.js

@@ -0,0 +1,258 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.symbol.iterator.js");
+require("core-js/modules/es.symbol.to-primitive.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.date.to-primitive.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.get-prototype-of.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/es.reflect.get.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.match.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _moment = _interopRequireDefault(require("moment"));
+var _Input2 = _interopRequireDefault(require("../_classes/input/Input"));
+var _utils = _interopRequireDefault(require("../../utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var DateTimeRangeComponent = exports.default = /*#__PURE__*/function (_Input) {
+  function DateTimeRangeComponent(component, options, data) {
+    var _this;
+    _classCallCheck(this, DateTimeRangeComponent);
+    _this = _callSuper(this, DateTimeRangeComponent, [component, options, data]);
+    var timezone = _this.component.timezone || _this.options.timezone;
+    var time24hr = !_lodash.default.get(_this.component, 'timePicker.showMeridian', true);
+
+    // Change the format to map to the settings.
+    if (!_this.component.enableDate) {
+      _this.component.format = _this.component.format.replace(/yyyy-MM-dd /g, '');
+    }
+    if (!_this.component.enableTime) {
+      _this.component.format = _this.component.format.replace(/ hh:mm a$/g, '');
+    } else if (time24hr) {
+      _this.component.format = _this.component.format.replace(/hh:mm a$/g, 'HH:mm');
+    } else {
+      _this.component.format = _this.component.format.replace(/HH:mm$/g, 'hh:mm a');
+    }
+    var customOptions = _this.component.customOptions || {};
+    if (typeof customOptions === 'string') {
+      try {
+        customOptions = JSON.parse(customOptions);
+      } catch (err) {
+        console.warn(err.message);
+        customOptions = {};
+      }
+    }
+
+    /* eslint-disable camelcase */
+    _this.component.widget = _objectSpread({
+      type: 'calendarRange',
+      timezone: timezone,
+      displayInTimezone: _lodash.default.get(_this.component, 'displayInTimezone', 'viewer'),
+      locale: _this.options.language,
+      useLocaleSettings: _lodash.default.get(_this.component, 'useLocaleSettings', false),
+      allowInput: _lodash.default.get(_this.component, 'allowInput', true),
+      mode: 'range',
+      enableTime: _lodash.default.get(_this.component, 'enableTime', true),
+      noCalendar: !_lodash.default.get(_this.component, 'enableDate', true),
+      format: _this.component.format,
+      hourIncrement: _lodash.default.get(_this.component, 'timePicker.hourStep', 1),
+      minuteIncrement: _lodash.default.get(_this.component, 'timePicker.minuteStep', 5),
+      time_24hr: time24hr,
+      readOnly: _this.options.readOnly,
+      minDate: _lodash.default.get(_this.component, 'datePicker.minDate'),
+      disabledDates: _lodash.default.get(_this.component, 'datePicker.disable'),
+      disableWeekends: _lodash.default.get(_this.component, 'datePicker.disableWeekends'),
+      disableWeekdays: _lodash.default.get(_this.component, 'datePicker.disableWeekdays'),
+      disableFunction: _lodash.default.get(_this.component, 'datePicker.disableFunction'),
+      maxDate: _lodash.default.get(_this.component, 'datePicker.maxDate')
+    }, customOptions);
+    /* eslint-enable camelcase */
+
+    // Add the validators date.
+    _this.validators.push('date');
+    return _this;
+  }
+  _inherits(DateTimeRangeComponent, _Input);
+  return _createClass(DateTimeRangeComponent, [{
+    key: "defaultSchema",
+    get: function get() {
+      return DateTimeRangeComponent.schema();
+    }
+  }, {
+    key: "defaultValue",
+    get: function get() {
+      var defaultValue = _superPropGet(DateTimeRangeComponent, "defaultValue", this, 1);
+      if (!defaultValue || defaultValue.length === 0) {
+        var tmpVal = [];
+        if (this.component.defaultStartDate) {
+          var parsedVal = _utils.default.getDateSetting(this.component.defaultStartDate);
+          if (parsedVal) {
+            tmpVal.push(parsedVal.toISOString());
+          }
+        }
+        if (this.component.defaultEndDate) {
+          var _parsedVal = _utils.default.getDateSetting(this.component.defaultEndDate);
+          if (_parsedVal) {
+            tmpVal.push(_parsedVal.toISOString());
+          }
+        }
+        return tmpVal;
+      }
+      return defaultValue;
+    }
+  }, {
+    key: "emptyValue",
+    get: function get() {
+      return [];
+    }
+  }, {
+    key: "momentFormat",
+    get: function get() {
+      return _utils.default.convertFormatToMoment(this.component.format);
+    }
+  }, {
+    key: "isEmpty",
+    value: function isEmpty() {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dataValue;
+      if (value && value.toString() === 'Invalid Date') {
+        return true;
+      }
+      if (value.length === 0) {
+        return true;
+      }
+      return _superPropGet(DateTimeRangeComponent, "isEmpty", this, 3)([value]);
+    }
+  }, {
+    key: "formatValue",
+    value: function formatValue(input) {
+      var result = _moment.default.utc(input).toISOString();
+      return result === 'Invalid date' ? input : result;
+    }
+  }, {
+    key: "isEqual",
+    value: function isEqual(valueA) {
+      var valueB = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dataValue;
+      return this.isEmpty(valueA) && this.isEmpty(valueB) || _moment.default.utc(valueA).format(this.momentFormat) === _moment.default.utc(valueB).format(this.momentFormat);
+    }
+  }, {
+    key: "createWrapper",
+    value: function createWrapper() {
+      return false;
+    }
+  }, {
+    key: "checkValidity",
+    value: function checkValidity(data, dirty, rowData) {
+      if (this.refs.input) {
+        this.refs.input.forEach(function (input) {
+          if (input.widget && input.widget.enteredDate) {
+            dirty = true;
+          }
+        });
+      }
+      return _superPropGet(DateTimeRangeComponent, "checkValidity", this, 3)([data, dirty, rowData]);
+    }
+  }, {
+    key: "getValueAsString",
+    value: function getValueAsString(value) {
+      var format = _utils.default.convertFormatToMoment(this.component.format);
+      format += format.match(/z$/) ? '' : ' z';
+      var timezone = this.timezone;
+      if (value && !this.attached && timezone) {
+        return _lodash.default.trim(_utils.default.momentDate(value, format, timezone).format(format));
+      }
+      return (value ? _lodash.default.trim((0, _moment.default)(value).format(format)) : value) || '';
+    }
+  }], [{
+    key: "schema",
+    value: function schema() {
+      for (var _len = arguments.length, extend = new Array(_len), _key = 0; _key < _len; _key++) {
+        extend[_key] = arguments[_key];
+      }
+      return _Input2.default.schema.apply(_Input2.default, [{
+        type: 'datetimeRange',
+        label: 'Date / Time Range',
+        key: 'dateTimeRange',
+        format: 'yyyy-MM-dd hh:mm a',
+        useLocaleSettings: false,
+        allowInput: true,
+        enableDate: true,
+        enableTime: true,
+        defaultValue: [],
+        defaultStartDate: null,
+        defaultEndDate: null,
+        displayInTimezone: 'viewer',
+        timezone: '',
+        datepickerMode: 'day',
+        datePicker: {
+          showWeeks: true,
+          startingDay: 0,
+          initDate: '',
+          minMode: 'day',
+          maxMode: 'year',
+          yearRows: 4,
+          yearColumns: 5,
+          minDate: null,
+          maxDate: null
+        },
+        timePicker: {
+          hourStep: 1,
+          minuteStep: 1,
+          showMeridian: true,
+          readonlyInput: false,
+          mousewheel: true,
+          arrowkeys: true
+        },
+        customOptions: {}
+      }].concat(extend));
+    }
+  }, {
+    key: "builderInfo",
+    get: function get() {
+      return {
+        title: 'Date / Time Range',
+        group: 'advanced',
+        icon: 'calendar',
+        weight: 41,
+        schema: DateTimeRangeComponent.schema()
+      };
+    }
+  }]);
+}(_Input2.default);

package/components/datetimeRange/editForm/DateTimeRange.edit.data.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = [{
+  key: 'multiple',
+  ignore: true
+}, {
+  type: 'textfield',
+  input: true,
+  key: 'defaultStartDate',
+  label: 'Default Start Date',
+  placeholder: 'moment()',
+  tooltip: 'You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, \'days\')',
+  weight: 6
+}, {
+  type: 'textfield',
+  input: true,
+  key: 'defaultEndDate',
+  label: 'Default End Date',
+  placeholder: 'moment()',
+  tooltip: 'You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, \'days\')',
+  weight: 7
+}, {
+  type: 'textarea',
+  as: 'json',
+  editor: 'ace',
+  weight: 28,
+  input: true,
+  key: 'customOptions',
+  label: 'Flatpickr options',
+  tooltip: 'A raw JSON object to use as options for the Date / Time component (Flatpickr).',
+  defaultValue: {}
+}];

package/components/datetimeRange/editForm/DateTimeRange.edit.date.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Evaluator = _interopRequireDefault(require("../../../utils/Evaluator"));
+var _utils = _interopRequireDefault(require("../../_classes/component/editForm/utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = [{
+  type: 'checkbox',
+  input: true,
+  key: 'enableDate',
+  label: 'Enable Date Input',
+  weight: 0,
+  tooltip: 'Enables date input for this field.'
+}, {
+  type: 'tags',
+  input: true,
+  key: 'datePicker.disable',
+  label: 'Disable specific dates or dates by range',
+  placeholder: '(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)',
+  tooltip: 'Add dates that you want to blacklist. For example: \n \n 2025-02-21',
+  validate: {
+    custom: 'if (_.isEmpty(input)) {\n  return true;\n}\nconst dates = _.isArray(input) ?\ninput : input.split(component.delimeter);\nconst isValid = _.every(dates, (data) => \n  !!data.match(/\\d{4}-\\d{2}-\\d{2}/g));\nvalid = isValid || \'Invalid date\';'
+  },
+  weight: 21
+}, {
+  type: 'panel',
+  title: 'Custom Disabled Dates',
+  collapsible: true,
+  collapsed: true,
+  style: {
+    'margin-bottom': '10px'
+  },
+  key: 'panel-disable-function',
+  customConditional: function customConditional() {
+    return !_Evaluator.default.noeval || _Evaluator.default.protectedEval;
+  },
+  components: [_utils.default.logicVariablesTable('<tr><th>date</th><td>The date object.</td></tr>'), {
+    type: 'textarea',
+    input: true,
+    editor: 'ace',
+    key: 'datePicker.disableFunction',
+    label: 'Disabling dates by a function',
+    description: 'For more information check out the <a href="https://flatpickr.js.org/examples/#disabling-dates" target="_blank">Docs</a>',
+    weight: 22
+  }, {
+    type: 'htmlelement',
+    tag: 'div',
+    content: '<h4>Example</h4>' + "<pre>// Disable all weekends<br>date.getDay() === 0 || date.getDay() === 6</pre>\n          "
+  }]
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'datePicker.disableWeekends',
+  label: 'Disable weekends',
+  tooltip: 'Check to disable weekends',
+  weight: 23
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'datePicker.disableWeekdays',
+  label: 'Disable weekdays',
+  tooltip: 'Check to disable weekdays',
+  weight: 23
+}];

package/components/datetimeRange/editForm/DateTimeRange.edit.display.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = [{
+  type: 'select',
+  input: true,
+  key: 'displayInTimezone',
+  label: 'Display in Timezone',
+  tooltip: 'This will display the captured date time in the select timezone.',
+  weight: 30,
+  defaultValue: 'viewer',
+  dataSrc: 'values',
+  data: {
+    values: [{
+      label: 'of Viewer',
+      value: 'viewer'
+    }, {
+      label: 'of Submission',
+      value: 'submission'
+    }, {
+      label: 'of Location',
+      value: 'location'
+    }, {
+      label: 'UTC',
+      value: 'utc'
+    }]
+  }
+}, {
+  type: 'select',
+  input: true,
+  key: 'timezone',
+  label: 'Select Timezone',
+  tooltip: 'Select the timezone you wish to display this Date',
+  weight: 31,
+  lazyLoad: true,
+  defaultValue: '',
+  valueProperty: 'name',
+  dataSrc: 'url',
+  data: {
+    url: '{{options.cdnUrl}}/timezones.json'
+  },
+  template: '<span>{{ item.label }}</span>',
+  conditional: {
+    json: {
+      '===': [{
+        var: 'data.displayInTimezone'
+      }, 'location']
+    }
+  }
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'useLocaleSettings',
+  label: 'Use Locale Settings',
+  tooltip: 'Use locale settings to display date and time.',
+  weight: 51
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'allowInput',
+  label: 'Allow Manual Input',
+  tooltip: 'Check this if you would like to allow the user to manually enter in the date.',
+  weight: 51
+}, {
+  type: 'textfield',
+  input: true,
+  key: 'format',
+  label: 'Format',
+  placeholder: 'Format',
+  description: 'Use formats provided by <a href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser/docs#uibdateparsers-format-codes" target="_blank">DateParser Codes</a>',
+  tooltip: 'The date format for displaying the datetime value.',
+  weight: 52
+}, {
+  type: 'editgrid',
+  input: true,
+  key: 'shortcutButtons',
+  label: 'Shortcut Buttons',
+  description: 'You can specify few buttons which will be shown above the calendar. Use Label to specify the name of the button and onClick to specify which date/time will be set when user clicks the button. E.g, date = new Date()',
+  templates: {
+    header: '<div class="row">\n  <div class="col-sm-3">Label</div>\n  <div class="col-sm-6">onClick</div>\n</div>',
+    row: '<div class="row">\n      <div class="col-sm-3">\n        {{ flattenedComponents.label.getView(row.label) }}\n      </div>\n      <div class="col-sm-6">\n        {{ flattenedComponents.onClick.getView(row.onClick) }}\n      </div>\n      {% if (!instance.disabled) { %}\n        <div class="col-sm-3">\n          <div class="btn-group pull-right">\n            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass("edit") }}"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass("trash") }}"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>'
+  },
+  components: [{
+    label: 'Label',
+    key: 'label',
+    type: 'textfield',
+    input: true,
+    validate: {
+      required: true
+    }
+  }, {
+    label: 'onClick',
+    key: 'onClick',
+    type: 'textarea',
+    editor: 'ace',
+    input: true,
+    validate: {
+      required: true
+    }
+  }],
+  defaultValue: []
+}];

package/components/datetimeRange/editForm/DateTimeRange.edit.time.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = [{
+  type: 'checkbox',
+  input: true,
+  key: 'enableTime',
+  label: 'Enable Time Input',
+  tooltip: 'Enables time input for this field.',
+  weight: 0
+}, {
+  type: 'number',
+  input: true,
+  key: 'timePicker.hourStep',
+  label: 'Hour Step Size',
+  tooltip: 'The number of hours to increment/decrement in the time picker.',
+  weight: 10
+}, {
+  type: 'number',
+  input: true,
+  key: 'timePicker.minuteStep',
+  label: 'Minute Step Size',
+  tooltip: 'The number of minutes to increment/decrement in the time picker.',
+  weight: 20
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'timePicker.showMeridian',
+  label: '12 Hour Time (AM/PM)',
+  tooltip: 'Display time in 12 hour time with AM/PM.',
+  weight: 30
+}];

package/components/datetimeRange/editForm/DateTimeRange.edit.validation.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = [{
+  type: 'checkbox',
+  input: true,
+  key: 'enableMinDateInput',
+  label: 'Use Input to add moment.js for minDate',
+  persistent: false,
+  weight: 10,
+  tooltip: 'Enables to use input for moment functions instead of calendar.'
+}, {
+  type: 'datetime',
+  input: true,
+  key: 'datePicker.minDate',
+  label: 'Use calendar to set minDate',
+  skipMerge: true,
+  weight: 10,
+  tooltip: 'Enables to use calendar to set date.',
+  customConditional: function customConditional(_ref) {
+    var data = _ref.data,
+      component = _ref.component;
+    if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
+      return false;
+    }
+    return !data.enableMinDateInput;
+  }
+}, {
+  type: 'textfield',
+  input: true,
+  enableTime: false,
+  key: 'datePicker.minDate',
+  skipMerge: true,
+  label: 'Minimum Date',
+  weight: 10,
+  tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
+  customConditional: function customConditional(_ref2) {
+    var data = _ref2.data,
+      component = _ref2.component;
+    if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
+      return true;
+    }
+    return data.enableMinDateInput;
+  }
+}, {
+  type: 'checkbox',
+  input: true,
+  key: 'enableMaxDateInput',
+  label: 'Use Input to add moment.js for maxDate',
+  persistent: false,
+  weight: 20,
+  tooltip: 'Enables to use input for moment functions instead of calendar.'
+}, {
+  type: 'datetime',
+  input: true,
+  key: 'datePicker.maxDate',
+  skipMerge: true,
+  label: 'Use calendar to set maxDate',
+  weight: 20,
+  tooltip: 'Enables to use calendar to set date.',
+  customConditional: function customConditional(_ref3) {
+    var data = _ref3.data,
+      component = _ref3.component;
+    if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
+      return false;
+    }
+    return !data.enableMaxDateInput;
+  }
+}, {
+  type: 'textfield',
+  input: true,
+  enableTime: false,
+  key: 'datePicker.maxDate',
+  skipMerge: true,
+  label: 'Maximum Date',
+  tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
+  weight: 20,
+  customConditional: function customConditional(_ref4) {
+    var data = _ref4.data,
+      component = _ref4.component;
+    if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
+      return true;
+    }
+    return data.enableMaxDateInput;
+  }
+}];

package/components/index.js

@@ -87,8 +87,10 @@ var _IconButton = _interopRequireDefault(require("./iconButton/IconButton"));
 var _ButtonGroups = _interopRequireDefault(require("./buttonGroups/ButtonGroups"));
 var _File2 = _interopRequireDefault(require("./file_china_grid/File"));
 var _Range = _interopRequireDefault(require("./range/Range"));
+var _DateTimeRange = _interopRequireDefault(require("./datetimeRange/DateTimeRange"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
+  datetimeRange: _DateTimeRange.default,
   range: _Range.default,
   fileUds: _File2.default,
   map: _Map.default,