Tabulator 中的日期时间选择器？

Question

我想在 Tabulator.js 中使用纯 javascript 日期时间选择器。通常我使用 Materializecss 但他们不提供日期时间选择器。只有日期或时间。所以我必须找到一个。我选择了 rome although I liked better dtsel - 它有更好的时间选择器，但我还没有找到它的 cdn。

我发现Tabulator提供了一种实现customer editors. In my code (see jsFiddle)的方法，就是editor:dateEditorOriginal函数。它运行良好，甚至提供内置日历。谁能告诉日历是从哪里来的？制表符还是时刻？

但我需要日期时间，所以请查看 var dateEditor。我尝试使用罗马选择器，但我无法使其工作。我可以 select 日期和时间，但不会将其传递给 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;
};

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

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

我面临的问题是，当前设置正确的日期是 selected，传递到输入字段而不是制表符。如果我是正确的，这就是我的解释。一旦日期和时间 selection 完成，我希望它在 Tabulator 中看到它。

Answer 1

您必须调用 success() 来更新 Tabulator。

出于某种原因（我花了太多时间但没有得到答案），您示例中的 success() 不喜欢用现有的单元格值调用？

所以我补充说：

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

它也不喜欢你的第二行没有时间码，所以使用时间选择器的第一个选择被忽略，并将其设置为 00:00，然后是第二个（和进一步的应用程序）按预期进行。

我想解决这些其他问题取决于您，因为我不使用 rome。我只是使用内置的

Answer 2

如果您不必使用 Rome，我建议您使用 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/

Answer 3

你的问题是模糊事件（你用它来捕捉用户的完成）当用户点击日历时已经触发 - 所以在他的选择被处理之前。

我能找到的唯一解决方案是使用另一个框架。以flatpickr（它也有时间特性，看起来更漂亮）为例，你可以定义一个触发成功函数的关闭事件。

（就像蒂姆的解决方案一样）

Tabulator 中的日期时间选择器？

datetime picker in Tabulator?

javascript

datetimepicker

tabulator