javascript - 制表器中的日期时间选择器？

Question

我想在 Tabulator.js 中使用纯 JavaScript 日期时间选择器。通常我使用 Materializecss 但他们不提供日期时间选择器。仅日期或时间。所以我必须找到一个。我选择rome虽然我更喜欢dtsel - 它有更好的时间选择器，但我还没有找到它的 CDN。

我发现Tabulator提供了一种实现客户editors的方法。在我的代码中(请参阅 jsFiddle )，它是 editor:dateEditorOriginal 函数。它工作得很好，甚至提供内置日历。谁能告诉我日历是从哪里来的吗？制表符还是矩？

但是我需要日期时间，所以请查看 var dateEditor。我尝试使用罗马选择器，但无法使其工作。我可以选择日期和时间，但它不会将其传递给制表器。

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;
};

有人可以帮我在 Tabulator 中实现纯 JavaScript 日期时间选择器吗？

这里是jsFiddle 。 From 列使用我的日期时间选择器实现，To 列使用原始日期编辑器。

我面临的问题是，在当前设置下，选择了正确的日期，传递到输入字段，但没有传递到制表器。如果我是正确的，这就是我对正在发生的事情的解释。日期和时间选择完成后，我希望它在制表器中看到它。

Answer 1

如果您不必使用罗马，我建议使用 flatpickr相反。

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;
};

这是一个例子: https://jsfiddle.net/fazLh6v0/