Date picker consisting of three component pickers I made a UI picker tool, like a "rolling select" to pick vales (demo here).

I made first a independent module with a ES6 Class, basically:


class ComponentPicker {

    constructor(target, data){
        // init stuff
    }

  deployHTML(target, data) {...}
    getValue(){...}
    setValue(val){...}
    onChange(callback){...}
}



Then I added a new layer to it. A Date picker that needs 3 component pickers. I thought about extending the class ComponentPicker but I didn't find a way to call 3 times super, it would look like


class DatePicker extends ComponentPicker{
  constructor(length) {
      this.pickers = data.map(component=&gt;{
            return super(target, component); // &lt;-- weird and wrong

        });
  }



So I ended up doing a "good old" ES5- style of class like:

function DatePicker (target, data) {
    this.wrapper = document.createElement('div');
    this.wrapper.className = 'date-picker';
    target.appendChild(this.wrapper);
    this.pickers = data.map(component=&gt;{
        return new ComponentPicker(target, component);
    });
    return this;
}
DatePicker.prototype.getValue = function(){
    return this.pickers.map(picker=&gt;{
        return picker.getValue();
    });
}
DatePicker.prototype.setValue = function(values){
    // etc 


and calling it with new DatePicker();

It works, but is there another way to reuse/extend the first class into another one that needs to interact with 3 of the original?
So if I understand correctly, you want to create an instance of DatePicker which by default has 3 instances of ComponentPicker in an array called pickers? Then the following should work:

class DatePicker extends ComponentPicker{
  constructor(length) {
    this.pickers = data.map(component =&gt; new ComponentPicker(target, component));
  }