如何在单元格中编辑制表日期？

Question

http://tabulator.info/examples/4.1

上面的可编辑数据示例显示了对日期字段使用自定义编辑器（链接中的示例是 DOB）。类似的例子存在于早期的制表器版本以及这里和 Github。生成的 javascript 日期选择器适用于大多数用户，但不是所有用户（即使在 Chrome 上也是如此）。因此，用户经常尝试的替代方法是尝试将日期直接输入到单元格中。但不幸的是，这是有问题的——与链接示例一样。更改月份和日期并不算太糟糕 - 但直接更改年份非常困难。有没有人有潜在的解决方案？我已经探索了从模糊/焦点/不同格式/“flatpicker”/等的所有内容 - 但我的结果是空的。

Answer 1

获得完全跨浏览器支持的最佳方法是创建一个使用第 3 方日期选择器库的自定义格式化程序，例如 jQuery UI datepicker。日期选择器的正确选择取决于您的需求和您现有的前端框架。

在 jQuery datepicker 的情况下，自定义格式化程序可能看起来像这样（此示例使用标准输入编辑器，您会在 onRendered 函数中注意到它转jQuery datepicker 的标准输入）：

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    var cellValue = cell.getValue(),
    input = document.createElement("input");

    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    onRendered(function(){
        input.style.height = "100%";
        $(input).datepicker(); //turn input into datepicker
        input.focus();
    });

    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value != cellValue){
            success(input.value);
        }else{
            cancel();
        }
    }

    //submit new value on blur or change
    input.addEventListener("change", onChange);
    input.addEventListener("blur", onChange);

    //submit new value on enter
    input.addEventListener("keydown", function(e){
        switch(e.keyCode){
            case 13:
            success(input.value);
            break;

            case 27:
            cancel();
            break;
        }
    });

    return input;
}

然后您可以将其添加到列定义中的列中： {title:"Date", field:"date", editor:dateEditor}

Answer 2

我无法理解 Oli 建议的工作方式。再说一次，我可能会错过一些简单的东西，因为我更像是一个新手。经过大量的反复试验，这是我最终创建的一种 hack 方法——基于 Oli 的 onRender 建议，但随后使用 datepicker 的 onSelect 其余部分。

好处：无论用户在单元格中的哪个位置单击，日期选择器都会出现——因此用户不太想尝试手动输入。如果用户碰巧尝试手动输入，他们可以这样做。 不太理想：如果用户手动输入，日期选择器不会消失，直到他/她点击其他地方。但不是炫耀。

     //Date Editor//
var dateEditor = function(cell, onRendered, success, cancel, editorParams){

var cellValue = cell.getValue(),
    input = document.createElement("input");
    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";


    onRendered(function(){
    $(input).datepicker({

    onSelect: function(dateStr) {
      var dateselected = $(this).datepicker('getDate');
      var cleandate = (moment(dateselected, "YYYY-MM-DD").format("MM/DD/YYYY"));
      $(input).datepicker( "destroy" );
      cell.setValue(cleandate,true);
      cancel();

     },
   });
    input.style.height = "100%"; 

   });


    return input;
};

Answer 3

我使用来自bootstrap 的日期选择器，这是我的代码

var dateEditor = function (cell, onRendered, success, cancel, editorParams) {
    //create and style input
    var editor = $("<input type='text'/>");
    // datepicker
    editor.datepicker({
        language: 'ja',
        format: 'yyyy-mm-dd',
        autoclose: true,
    }).on('changeDate', function() {
        if(editorParams != 'row'){
            editor.trigger('keyup');
        }else{
            editor.trigger('change');
        }
    });

    editor.css({
        "padding": "3px",
        "width": "100%",
        "height": "100%",
        "box-sizing": "border-box",
    });

    editor.val(cell.getValue());

    onRendered(function(){
        editor.focus();
    });

    editor.on("blur", function (e) {
        e.preventDefault();
        if(editor.val() === '') {
            success(cell.getValue());
        }
        else {
            //submit new value on change
            editor.on("change", function (e) {
                success(editor.val());
            });

        }
    });

    return editor;
}