Countdown type "datetime-local" not working in Mozilla Browser and question about init date-time-picker inside Trait

[v8jupiter]

Hello, I found this issue https://github.com/artf/grapesjs/issues/1250. Can you explain help how to init js "date-time-picker" in custom trait. As example this date-time-picker - https://flatpickr.js.org/

[v8jupiter]

I correct understood? Need to init plugin in getInputEl( ?

`var rome = require('rome'); export default (editor, opt = {}) => { // Each new type extends the default Trait editor.TraitManager.addType('datetimepicker', { events: { 'keyup': 'onChange', // trigger parent onChange method on keyup },

/**
* Returns the input element
* @return {HTMLElement}
*/
getInputEl: function () {
  const name = this.model.get('name');
  if (!this.inputEl) {
    let input = document.createElement("input");
    input.type = 'text';
    input.id = 'timeSel1';
    input.value = this.target.get(name);
    this.inputEl = input;
    rome(this.inputEl);
  }
  return this.inputEl;
},

/**
 * Triggered when the value of the model is changed
 */
onValueChange: function () {
  this.target.set(this.model.get('name'), this.model.get('value'));
}

}); }`

[v8jupiter]

It seems need overwrite renderField()

[v8jupiter]

Tmp solution, but if you have more then 1 elements it was issue

var rome = require('rome');

export default (editor, opt = {}) => {
  // Each new type extends the default Trait
  editor.TraitManager.addType('datetimepicker', {
    events: {
      'change': 'onChange', // trigger parent onChange method on keyup
    },

    /**
    * Returns the input element
    * @return {HTMLElement}
    */
   getInputEl: function () {
    const name = this.model.get('name');
    if (!this.inputEl) {
      let input = document.createElement("input");
      input.type = 'text';
      input.id = 'datetime1';
      input.value = this.target.get(name);
      input.onclick = function () {
        let el = document.getElementById('datetime1');
        rome(el).show();
    };
      this.inputEl = input;
    }
    return this.inputEl;
    },

    /**
     * Triggered when the value of the model is changed
     */
    onValueChange: function () {
      this.target.set(this.model.get('name'), this.model.get('value'));
    },
  });
}

[artf]

Yeah you got the point