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

Question

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

我发现 Tabulator 提供了一种实现客户editors 的方法。在我的代码中（参见jsFiddle）它是editor:dateEditorOriginal 函数。它运行良好，甚至提供内置日历。有人能说出日历的来源吗？制表符还是时刻？

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

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

Answer 1

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

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

所以我补充说：

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

它也不喜欢您的第二行中没有时间码，因此忽略使用时间选择器的第一个选择，并将其设置为 00:00，然后第二行（以及更多应用程序）按预期进行。

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

Answer 2

如果您不必使用罗马，我可以建议使用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（它也有时间功能，看起来更漂亮）为例，你可以定义一个触发成功函数的关闭事件。

（就像蒂姆的解决方案）