datetime picker in Tabulator?

Question

I want to use pure javascript datetime picker in Tabulator.js. Usually I use Materializecss but they don`t provide datetime picker. Only date or time. So I had to find one. I chose rome although I liked better dtsel - it got much nicer time picker but I have not found cdn for it.

I found that Tabulator provides a way to implement customer editors. In my code (see jsFiddle) it is the editor:dateEditorOriginal function. It works nicely and even provides build in calendar. Could someone tell where the calendar comes from? Tabulator or moment?

But I need datetime so please have have a look at the var dateEditor. I tried to use rome picker but I am not able to make it work. I am able to select the date and time but it will not pass it to Tabulator.

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    //cell - the cell component for the editable cell
    //onRendered - function to call when the editor has been rendered
    //success - function to call to pass the successfuly updated value to Tabulator
    //cancel - function to call to abort the edit and return to a normal cell
    //editorParams - params object passed into the editorParams column definition property

    //create and style editor
    var editor = document.createElement("input");
    //var cellValue = cell.getValue()
    var cellValue = moment(cell.getValue(), "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm")
   // editor.setAttribute("type", "date");

var cal

    //create and style input
    editor.style.padding = "3px";
    editor.style.width = "100%";
    editor.style.boxSizing = "border-box";

    //Set value of editor to the current value of the cell
  //  editor.value = moment(cell.getValue(), "YYYY-MM-DD  HH:mm").format("YYYY-MM-DD HH:mm")
//editor.value = cellValue
    //set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
    onRendered(function(){
//console.log(cellValue)

 cal = rome(editor,{
       "inputFormat": "DD-MM-YYYY HH:mm",
       "initialValue": cellValue,    
       "timeInterval": 600,
       "weekStart": 1
})
  //      editor.focus();
    //    editor.style.css = "100%";
    });

    //when the value has been set, trigger the cell to update
    function successFunc(){
      var tmp = editor.value

console.log(cal.getDate())
console.log(tmp)
console.log(cell.getValue())
//      success(tmp)
//       success(moment(editor.value, "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm"));
    }

    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};

Could someone help me to implement pure javascript datetime picker in Tabulator?

Here is jsFiddle. The column From uses my implementation of datetime picker and column To uses original dateEditor.

The issue I am facing to is that with the current set up the correct date is selected, passed to the input field but not to the Tabulator. It is my explanation what is happening if I am correct. Once the date & time selection finished I want it to see it in the Tabulator.

Answer 1

If you don't have to use Rome, I can suggest using flatpickr instead.

var dateEditor = (cell, onRendered, success, cancel, editorParams) => {
  var editor = document.createElement("input");
  editor.value = cell.getValue();

  var datepicker = flatpickr(editor, {
    enableTime: true,
    dateFormat: "j-n-Y H:i",
    onClose: (selectedDates, dateStr, instance) => {
      success(dateStr);
      instance.destroy();
    },
  });

  onRendered(() => {
    editor.focus();
  });

  return editor;
};

Here is an example: https://jsfiddle.net/fazLh6v0/

Answer 2

you must call success() to update Tabulator.

for some reason (that I spent WAY too much time on but didnt get an answer), success() in your example does NOT like to be called with the existing cell value ?

So I added :

(cell.getValue() != cal.getDateString()) && success(cal.getDateString());

It also didnt like that your 2nd row doesnt have a timecode in it, so the first choice of using the time selector is ignored, and sets it to 00:00, then the 2nd (and further applications) go as expected.

Solving these other problems, is up to you I guess, coz I dont use rome. I just use the builtin <input type=datetime-local>