@oat-sa/tao-core-ui 1.60.2 → 1.62.0

package/dist/dateRange/dateRange.js

@@ -1,450 +1,436 @@
 define(['lodash', 'i18n', 'moment', 'ui/component', 'ui/datetime/picker', 'handlebars', 'lib/dompurify/purify', 'css!ui/dateRange/css/dateRange.css'], function (_, __, moment, component, dateTimePicker, Handlebars, DOMPurify, dateRange_css) { 'use strict';
 
-  _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
-  __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
-  moment = moment && Object.prototype.hasOwnProperty.call(moment, 'default') ? moment['default'] : moment;
-  component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
-  dateTimePicker = dateTimePicker && Object.prototype.hasOwnProperty.call(dateTimePicker, 'default') ? dateTimePicker['default'] : dateTimePicker;
-  Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
-  DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
-  }
-
-  function Helpers0 (hb) {
-    //register a i18n helper
-    hb.registerHelper('__', function (key) {
-      return __(key);
-    });
-    /**
-     * Register dompurify helper
-     *
-     * https://github.com/cure53/DOMPurify
-     * with config SAFE_FOR_TEMPLATES: true
-     * to make output safe for template systems
+    _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
+    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
+    moment = moment && Object.prototype.hasOwnProperty.call(moment, 'default') ? moment['default'] : moment;
+    component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
+    dateTimePicker = dateTimePicker && Object.prototype.hasOwnProperty.call(dateTimePicker, 'default') ? dateTimePicker['default'] : dateTimePicker;
+    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
+    DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
+
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2013-2019 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+     *
+     *
      */
+    function Helpers0 (hb) {
+      //register a i18n helper
+      hb.registerHelper('__', function (key) {
+        return __(key);
+      });
 
-    hb.registerHelper('dompurify', function (context) {
-      return DOMPurify.sanitize(context);
-    });
-    /**
-     * Register join helper
-     *
-     * Example :
-     * var values = {a:v1, b:v2, c:v3};
-     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
-     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
-     */
-
-    hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
-      var fragments = [];
-      keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
-      fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
-      wrapper = typeof wrapper === 'string' ? wrapper : '"';
-
-      _.forIn(arr, function (value, key) {
-        var fragment = '';
+      /**
+       * Register dompurify helper
+       *
+       * https://github.com/cure53/DOMPurify
+       * with config SAFE_FOR_TEMPLATES: true
+       * to make output safe for template systems
+       */
+      hb.registerHelper('dompurify', function (context) {
+        return DOMPurify.sanitize(context);
+      });
 
-        if (value !== null || value !== undefined) {
-          if (typeof value === 'boolean') {
-            value = value ? 'true' : 'false';
-          } else if (_typeof(value) === 'object') {
-            value = _.values(value).join(' ');
+      /**
+       * Register join helper
+       *
+       * Example :
+       * var values = {a:v1, b:v2, c:v3};
+       * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+       * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+       */
+      hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
+        var fragments = [];
+        keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
+        fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
+        wrapper = typeof wrapper === 'string' ? wrapper : '"';
+        _.forIn(arr, function (value, key) {
+          var fragment = '';
+          if (value !== null || value !== undefined) {
+            if (typeof value === 'boolean') {
+              value = value ? 'true' : 'false';
+            } else if (typeof value === 'object') {
+              value = _.values(value).join(' ');
+            }
+          } else {
+            value = '';
           }
-        } else {
-          value = '';
-        }
+          if (keyValueGlue !== undefined) {
+            fragment += key + keyValueGlue;
+          }
+          fragment += wrapper + value + wrapper;
+          fragments.push(fragment);
+        });
+        return fragments.join(fragmentGlue);
+      });
 
-        if (keyValueGlue !== undefined) {
-          fragment += key + keyValueGlue;
+      //register a classic "for loop" helper
+      //it also adds a local variable "i" as the index in each iteration loop
+      hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+        var ret = '';
+        startIndex = parseInt(startIndex);
+        stopIndex = parseInt(stopIndex);
+        increment = parseInt(increment);
+        for (var i = startIndex; i < stopIndex; i += increment) {
+          ret += options.fn(_.extend({}, this, {
+            i: i
+          }));
+        }
+        return ret;
+      });
+      hb.registerHelper('equal', function (var1, var2, options) {
+        if (var1 == var2) {
+          return options.fn(this);
+        } else {
+          return options.inverse(this);
         }
-
-        fragment += wrapper + value + wrapper;
-        fragments.push(fragment);
       });
 
-      return fragments.join(fragmentGlue);
-    }); //register a classic "for loop" helper
-    //it also adds a local variable "i" as the index in each iteration loop
-
-    hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
-      var ret = '';
-      startIndex = parseInt(startIndex);
-      stopIndex = parseInt(stopIndex);
-      increment = parseInt(increment);
-
-      for (var i = startIndex; i < stopIndex; i += increment) {
-        ret += options.fn(_.extend({}, this, {
-          i: i
-        }));
-      }
-
-      return ret;
-    });
-    hb.registerHelper('equal', function (var1, var2, options) {
-      if (var1 == var2) {
-        return options.fn(this);
-      } else {
-        return options.inverse(this);
-      }
-    }); // register a "get property" helper
-    // it gets the named property from the provided context
-
-    hb.registerHelper('property', function (name, context) {
-      return context[name] || '';
-    }); // register an 'includes' helper
-    // it checks if value is in array
-
-    hb.registerHelper('includes', function (haystack, needle, options) {
-      if (_.contains(haystack, needle)) {
-        return options.fn(this);
-      }
-    });
-  }
-
-  if (!Helpers0.__initialized) {
-    Helpers0(Handlebars);
-    Helpers0.__initialized = true;
-  }
-  var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
-    this.compilerInfo = [4,'>= 1.0.0'];
-  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-    var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, self=this;
+      // register a "get property" helper
+      // it gets the named property from the provided context
+      hb.registerHelper('property', function (name, context) {
+        return context[name] || '';
+      });
 
-  function program1(depth0,data) {
-    
-    var buffer = "", stack1;
-    buffer += "\r\n    <button class=\"small btn-info\" data-control=\"filter\" title=\""
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.title)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\">\r\n        <span class=\"icon icon-"
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.icon)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\"></span> "
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\r\n    </button>\r\n    ";
-    return buffer;
+      // register an 'includes' helper
+      // it checks if value is in array
+      hb.registerHelper('includes', function (haystack, needle, options) {
+        if (_.contains(haystack, needle)) {
+          return options.fn(this);
+        }
+      });
     }
 
-  function program3(depth0,data) {
-    
-    var buffer = "", stack1;
-    buffer += "\r\n    <button class=\"small btn-info btn-secondary\" data-control=\"reset\" title=\""
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.title)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\">\r\n        <span class=\"icon icon-"
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.icon)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\"></span> "
-      + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-      + "\r\n    </button>\r\n    ";
-    return buffer;
+    if (!Helpers0.__initialized) {
+      Helpers0(Handlebars);
+      Helpers0.__initialized = true;
     }
-
-    buffer += "<div class=\"daterange\">\r\n    <span class=\"start\">\r\n        <label for=\"periodStart\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "From", options) : helperMissing.call(depth0, "__", "From", options)))
-      + "</label>\r\n    </span>\r\n    <span class=\"end\">\r\n        <label for=\"periodEnd\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "to", options) : helperMissing.call(depth0, "__", "to", options)))
-      + "</label>\r\n    </span>\r\n    ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.enable), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\r\n    ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.enable), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\r\n</div>\r\n";
-    return buffer;
-    });
-  function formTpl(data, options, asString) {
-    var html = Template(data, options);
-    return (asString || true) ? html : $(html);
-  }
-
-  /**
-   * This program is free software; you can redistribute it and/or
-   * modify it under the terms of the GNU General Public License
-   * as published by the Free Software Foundation; under version 2
-   * of the License (non-upgradable).
-   *
-   * This program is distributed in the hope that it will be useful,
-   * but WITHOUT ANY WARRANTY; without even the implied warranty of
-   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   * GNU General Public License for more details.
-   *
-   * You should have received a copy of the GNU General Public License
-   * along with this program; if not, write to the Free Software
-   * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-   *
-   * Copyright (c) 2016-2019 (original work) Open Assessment Technologies SA ;
-   *
-   */
-  /**
-   * Default configuration
-   * @type {Object}
-   */
-
-  var defaults = {
-    maxRangeDays: false,
-    resetButton: {
-      enable: true,
-      label: __('Reset'),
-      title: __('Reset the range values'),
-      icon: 'reset'
-    },
-    applyButton: {
-      enable: true,
-      label: __('Apply'),
-      title: __('Apply date range'),
-      icon: 'filter'
-    },
-    startPicker: {
-      setup: 'datetime',
-      format: 'YYYY-MM-DD HH:mm:SS',
-      field: {
-        name: 'periodStart'
+    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+      this.compilerInfo = [4,'>= 1.0.0'];
+    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+      var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, self=this;
+
+    function program1(depth0,data) {
+      
+      var buffer = "", stack1;
+      buffer += "\n    <button class=\"small btn-info\" data-control=\"filter\" title=\""
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.title)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\">\n        <span class=\"icon icon-"
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.icon)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\"></span> "
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\n    </button>\n    ";
+      return buffer;
       }
-    },
-    endPicker: {
-      setup: 'datetime',
-      format: 'YYYY-MM-DD HH:mm:SS',
-      field: {
-        name: 'periodEnd'
+
+    function program3(depth0,data) {
+      
+      var buffer = "", stack1;
+      buffer += "\n    <button class=\"small btn-info btn-secondary\" data-control=\"reset\" title=\""
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.title)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\">\n        <span class=\"icon icon-"
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.icon)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\"></span> "
+        + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.label)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + "\n    </button>\n    ";
+      return buffer;
       }
-    }
-  };
-  /**
-   * Setup a datetime picker on an element
-   * @param {HTMLElement|jQuery} element - the element to append to the picker to
-   * @param {Object} [config] - the picker configuration
-   * @returns {Promise<dateTimePicker>} resolves when the picker is "ready"
-   */
 
-  var setupDateTimePicker = function setupDateTimePicker(element, config) {
-    return new Promise(function (resolve) {
-      dateTimePicker(element, config).on('ready', function () {
-        resolve(this);
+      buffer += "<div class=\"daterange\">\n    <span class=\"start\">\n        <label for=\"periodStart\">"
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "From", options) : helperMissing.call(depth0, "__", "From", options)))
+        + "</label>\n    </span>\n    <span class=\"end\">\n        <label for=\"periodEnd\">"
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "to", options) : helperMissing.call(depth0, "__", "to", options)))
+        + "</label>\n    </span>\n    ";
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.applyButton)),stack1 == null || stack1 === false ? stack1 : stack1.enable), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n    ";
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.resetButton)),stack1 == null || stack1 === false ? stack1 : stack1.enable), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n</div>\n";
+      return buffer;
       });
-    });
-  };
-  /**
-   * Creates a dates range with date pickers
-   *
-   * @param {HTMLElement|jQuery} container - where to append the component
-   * @param {Object} [config]
-   * @param {Object} [config.resetButton]
-   * @param {Boolean} [config.resetButton.enable] - enable or not the reset button
-   * @param {String} [config.resetButton.label] - the reset button label
-   * @param {String} [config.resetButton.title] - the reset button title (HTML title)
-   * @param {Boolean} [config.applyButton.enable] - enable or not the apply button
-   * @param {String} [config.applyButton.label] - the apply button label
-   * @param {String} [config.applyButton.title] - the apply button title (HTML title)
-   * @param {Object} [config.startPicker] - the configuration sent to the start picker, see ui/datetime/picker
-   * @param {Object} [config.startPicker] - the configuration sent to the end picker ,s see ui/datetime/picker
-   * @param {Number} [config.maxRangeDays] - if > 0 limits the max number of days in the range
-   * @fires dateRange#ready the picker is ready
-   * @fires dateRange#change when any date is changed
-   * @fires dateRange#close when a picker is closed
-   * @fires dateRange#submit when the submit button is clicked
-   */
-
-
-  function dateRangeFactory(container, config) {
-    // if the picker replace fields we don't use the component template
-    // NOTE this is used for backward compatibility only...
-    var preConfig = _.defaults(config || {}, defaults);
+    function formTpl(data, options, asString) {
+      var html = Template(data, options);
+      return (asString || true) ? html : $(html);
+    }
 
-    var useTemplate = preConfig.startPicker && !preConfig.startPicker.replaceField && preConfig.endPicker && !preConfig.endPicker.replaceField;
-    /**
-     * The date range component
-     * @typedef {Object} dateRange
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2016-2019 (original work) Open Assessment Technologies SA ;
+     *
      */
 
-    var dateRange = component({
-      /**
-       * Gets the start date of the range
-       * @returns {String} the start date value
-       */
-      getStart: function getStart() {
-        if (this.is('ready')) {
-          return this.startPicker.getValue();
-        }
+    /**
+     * Default configuration
+     * @type {Object}
+     */
+    var defaults = {
+      maxRangeDays: false,
+      resetButton: {
+        enable: true,
+        label: __('Reset'),
+        title: __('Reset the range values'),
+        icon: 'reset'
       },
-
-      /**
-       * Gets the end date of the range
-       * @returns {String} the end date value
-       */
-      getEnd: function getEnd() {
-        if (this.is('ready')) {
-          return this.endPicker.getValue();
-        }
+      applyButton: {
+        enable: true,
+        label: __('Apply'),
+        title: __('Apply date range'),
+        icon: 'filter'
       },
-
-      /**
-       * Reset the values
-       * @returns {dateRange} chains
-       * @fires dateRange#reset
-       */
-      reset: function reset() {
-        if (this.is('ready')) {
-          this.startPicker.updateConstraints('maxDate', null).clear();
-          this.endPicker.updateConstraints('minDate', null).clear();
-          /**
-           * The values get cleared out
-           * @event dateRange#reset
-           */
-
-          this.trigger('reset');
+      startPicker: {
+        setup: 'datetime',
+        format: 'YYYY-MM-DD HH:mm:SS',
+        field: {
+          name: 'periodStart'
         }
-
-        return this;
       },
-
-      /**
-       * Apply and submit the values
-       * @returns {dateRange} chains
-       * @fires dateRange#submit
-       */
-      submit: function submit() {
-        if (this.is('ready')) {
-          /**
-           * The values get submitted
-           * @event dateRange#submit
-           * @param {String} start - the start/from date
-           * @param {String} end - the end/to date
-           */
-          this.trigger('submit', this.getStart(), this.getEnd());
+      endPicker: {
+        setup: 'datetime',
+        format: 'YYYY-MM-DD HH:mm:SS',
+        field: {
+          name: 'periodEnd'
         }
       }
-    }, defaults);
+    };
 
-    if (useTemplate) {
-      dateRange.setTemplate(formTpl);
-    }
-
-    dateRange.on('init', function () {
-      if (container) {
-        this.render(container);
-      }
-    }).on('render', function () {
-      var self = this;
-      var startElement;
-      var endElement;
-      var element = this.getElement()[0];
-
-      if (useTemplate) {
-        this.controls = {
-          filter: element.querySelector('[data-control="filter"]'),
-          reset: element.querySelector('[data-control="reset"]'),
-          start: element.querySelector('.start'),
-          end: element.querySelector('.end')
-        };
-        startElement = this.controls.start;
-        endElement = this.controls.end;
-      } else {
-        startElement = element;
-        endElement = element;
-      }
-
-      Promise.all([setupDateTimePicker(startElement, this.config.startPicker), setupDateTimePicker(endElement, this.config.endPicker)]).then(function (pickers) {
-        self.startPicker = pickers[0];
-        self.endPicker = pickers[1];
-        self.startPicker.on('change', function (value) {
-          if (value && self.endPicker && self.endPicker.is('ready')) {
-            self.endPicker.updateConstraints('minDate', value);
-
-            if (self.config.maxRangeDays > 0) {
-              self.endPicker.updateConstraints('maxDate', moment(value).add(self.config.maxRangeDays, 'd').toDate());
-            }
-          }
-          /**
-           * The values get changed
-           * @event dateRange#change
-           * @param {String} target - start or end
-           * @param {String} value - the changed value
-           */
-
-
-          self.trigger('change', 'start', value);
-        }).on('clear', function () {
-          if (self.endPicker && self.endPicker.is('ready')) {
-            self.endPicker.updateConstraints('minDate', '');
-            self.endPicker.updateConstraints('maxDate', '');
+    /**
+     * Setup a datetime picker on an element
+     * @param {HTMLElement|jQuery} element - the element to append to the picker to
+     * @param {Object} [config] - the picker configuration
+     * @returns {Promise<dateTimePicker>} resolves when the picker is "ready"
+     */
+    var setupDateTimePicker = function setupDateTimePicker(element, config) {
+      return new Promise(function (resolve) {
+        dateTimePicker(element, config).on('ready', function () {
+          resolve(this);
+        });
+      });
+    };
+
+    /**
+     * Creates a dates range with date pickers
+     *
+     * @param {HTMLElement|jQuery} container - where to append the component
+     * @param {Object} [config]
+     * @param {Object} [config.resetButton]
+     * @param {Boolean} [config.resetButton.enable] - enable or not the reset button
+     * @param {String} [config.resetButton.label] - the reset button label
+     * @param {String} [config.resetButton.title] - the reset button title (HTML title)
+     * @param {Boolean} [config.applyButton.enable] - enable or not the apply button
+     * @param {String} [config.applyButton.label] - the apply button label
+     * @param {String} [config.applyButton.title] - the apply button title (HTML title)
+     * @param {Object} [config.startPicker] - the configuration sent to the start picker, see ui/datetime/picker
+     * @param {Object} [config.startPicker] - the configuration sent to the end picker ,s see ui/datetime/picker
+     * @param {Number} [config.maxRangeDays] - if > 0 limits the max number of days in the range
+     * @fires dateRange#ready the picker is ready
+     * @fires dateRange#change when any date is changed
+     * @fires dateRange#close when a picker is closed
+     * @fires dateRange#submit when the submit button is clicked
+     */
+    function dateRangeFactory(container, config) {
+      // if the picker replace fields we don't use the component template
+      // NOTE this is used for backward compatibility only...
+      var preConfig = _.defaults(config || {}, defaults);
+      var useTemplate = preConfig.startPicker && !preConfig.startPicker.replaceField && preConfig.endPicker && !preConfig.endPicker.replaceField;
+      /**
+       * The date range component
+       * @typedef {Object} dateRange
+       */
+      var dateRange = component({
+        /**
+         * Gets the start date of the range
+         * @returns {String} the start date value
+         */
+        getStart: function getStart() {
+          if (this.is('ready')) {
+            return this.startPicker.getValue();
           }
-        }).on('close', function () {
-          /**
-           * The picker get closed
-           * @event dateRange#close
-           * @param {String} target - start or end
-           * @param {String} value - the changed value
-           */
-          self.trigger('close', 'start', this.getValue());
-        }).spread('error', self);
-        self.endPicker.on('change', function (value) {
-          if (value && self.startPicker && self.startPicker.is('ready')) {
-            self.startPicker.updateConstraints('maxDate', value);
+        },
+        /**
+         * Gets the end date of the range
+         * @returns {String} the end date value
+         */
+        getEnd: function getEnd() {
+          if (this.is('ready')) {
+            return this.endPicker.getValue();
           }
-          /**
-           * @see dateRange#change
-           */
-
-
-          self.trigger('change', 'end', value);
-        }).on('clear', function () {
-          if (self.startPicker && self.startPicker.is('ready')) {
-            self.startPicker.updateConstraints('minDate', '');
-            self.startPicker.updateConstraints('maxDate', '');
+        },
+        /**
+         * Reset the values
+         * @returns {dateRange} chains
+         * @fires dateRange#reset
+         */
+        reset: function reset() {
+          if (this.is('ready')) {
+            this.startPicker.updateConstraints('maxDate', null).clear();
+            this.endPicker.updateConstraints('minDate', null).clear();
+
+            /**
+             * The values get cleared out
+             * @event dateRange#reset
+             */
+            this.trigger('reset');
           }
-        }).on('close', function () {
-          /**
-           * @see dateRange#close
-           */
-          self.trigger('close', 'end', this.getValue());
-        }).spread('error', self);
-      }).then(function () {
-        self.setState('ready', true);
-        /**
-         * The component is fully ready to get used
-         * @event dateRange#ready
+          return this;
+        },
+        /**
+         * Apply and submit the values
+         * @returns {dateRange} chains
+         * @fires dateRange#submit
          */
-
-        self.trigger('ready');
-      }).catch(function (err) {
-        self.trigger('error', err);
-      });
-
-      if (useTemplate && this.controls.filter) {
-        this.controls.filter.addEventListener('click', function (e) {
-          e.preventDefault();
-          self.submit();
-        });
-      }
-
-      if (useTemplate && this.controls.reset) {
-        this.controls.reset.addEventListener('click', function (e) {
-          e.preventDefault();
-          self.reset();
-        });
-      }
-    }).on('destroy', function () {
-      if (this.startPicker) {
-        this.startPicker.destroy();
-      }
-
-      if (this.endPicker) {
-        this.endPicker.destroy();
+        submit: function submit() {
+          if (this.is('ready')) {
+            /**
+             * The values get submitted
+             * @event dateRange#submit
+             * @param {String} start - the start/from date
+             * @param {String} end - the end/to date
+             */
+            this.trigger('submit', this.getStart(), this.getEnd());
+          }
+        }
+      }, defaults);
+      if (useTemplate) {
+        dateRange.setTemplate(formTpl);
       }
-    });
+      dateRange.on('init', function () {
+        if (container) {
+          this.render(container);
+        }
+      }).on('render', function () {
+        var self = this;
+        var startElement;
+        var endElement;
+        var element = this.getElement()[0];
+        if (useTemplate) {
+          this.controls = {
+            filter: element.querySelector('[data-control="filter"]'),
+            reset: element.querySelector('[data-control="reset"]'),
+            start: element.querySelector('.start'),
+            end: element.querySelector('.end')
+          };
+          startElement = this.controls.start;
+          endElement = this.controls.end;
+        } else {
+          startElement = element;
+          endElement = element;
+        }
+        Promise.all([setupDateTimePicker(startElement, this.config.startPicker), setupDateTimePicker(endElement, this.config.endPicker)]).then(function (pickers) {
+          self.startPicker = pickers[0];
+          self.endPicker = pickers[1];
+          self.startPicker.on('change', function (value) {
+            if (value && self.endPicker && self.endPicker.is('ready')) {
+              self.endPicker.updateConstraints('minDate', value);
+              if (self.config.maxRangeDays > 0) {
+                self.endPicker.updateConstraints('maxDate', moment(value).add(self.config.maxRangeDays, 'd').toDate());
+              }
+            }
 
-    _.defer(function () {
-      dateRange.init(config);
-    });
+            /**
+             * The values get changed
+             * @event dateRange#change
+             * @param {String} target - start or end
+             * @param {String} value - the changed value
+             */
+            self.trigger('change', 'start', value);
+          }).on('clear', function () {
+            if (self.endPicker && self.endPicker.is('ready')) {
+              self.endPicker.updateConstraints('minDate', '');
+              self.endPicker.updateConstraints('maxDate', '');
+            }
+          }).on('close', function () {
+            /**
+             * The picker get closed
+             * @event dateRange#close
+             * @param {String} target - start or end
+             * @param {String} value - the changed value
+             */
+            self.trigger('close', 'start', this.getValue());
+          }).spread('error', self);
+          self.endPicker.on('change', function (value) {
+            if (value && self.startPicker && self.startPicker.is('ready')) {
+              self.startPicker.updateConstraints('maxDate', value);
+            }
 
-    return dateRange;
-  }
+            /**
+             * @see dateRange#change
+             */
+            self.trigger('change', 'end', value);
+          }).on('clear', function () {
+            if (self.startPicker && self.startPicker.is('ready')) {
+              self.startPicker.updateConstraints('minDate', '');
+              self.startPicker.updateConstraints('maxDate', '');
+            }
+          }).on('close', function () {
+            /**
+             * @see dateRange#close
+             */
+            self.trigger('close', 'end', this.getValue());
+          }).spread('error', self);
+        }).then(function () {
+          self.setState('ready', true);
+
+          /**
+           * The component is fully ready to get used
+           * @event dateRange#ready
+           */
+          self.trigger('ready');
+        }).catch(function (err) {
+          self.trigger('error', err);
+        });
+        if (useTemplate && this.controls.filter) {
+          this.controls.filter.addEventListener('click', function (e) {
+            e.preventDefault();
+            self.submit();
+          });
+        }
+        if (useTemplate && this.controls.reset) {
+          this.controls.reset.addEventListener('click', function (e) {
+            e.preventDefault();
+            self.reset();
+          });
+        }
+      }).on('destroy', function () {
+        if (this.startPicker) {
+          this.startPicker.destroy();
+        }
+        if (this.endPicker) {
+          this.endPicker.destroy();
+        }
+      });
+      _.defer(function () {
+        dateRange.init(config);
+      });
+      return dateRange;
+    }
 
-  return dateRangeFactory;
+    return dateRangeFactory;
 
 });